/* ================================================================
   Calendar of Aabahran — illuminated-manuscript aesthetic
   Built on the redesign theme's tokens: --bg-panel, --border,
   --highlight (gold), --accent (green), --text/-bright/-dim,
   --font-display (Cormorant Garamond), --font-prose (DM Sans).
   ================================================================ */

.cal-page {
    max-width: 960px;
    margin: 2.5rem auto 5rem;
    padding: 0 1.5rem;
    color: var(--text);
    font-family: var(--font-prose);
    --cal-life:    #9bb58a;
    --cal-nature:  #a8a172;
    --cal-balance: #c4a872;
    --cal-chaos:   #a07c5c;
    --cal-death:   #4a5668;
    --cal-order:   #6a7585;
}

/* ---------------- Header ---------------- */

.cal-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    padding: 2rem 0 1.25rem;
}

.cal-header-rule {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--border) 12%,
        var(--border) 88%,
        transparent 100%
    );
    position: relative;
    margin: 0.75rem 0;
}

.cal-header-rule::before {
    content: '◆';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-body);
    padding: 0 0.75rem;
    color: var(--highlight);
    font-size: 0.5rem;
    opacity: 0.7;
    letter-spacing: 0.5em;
}

.cal-header-rule::after {
    content: '◆ ◆';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-body);
    padding: 0 0.75rem;
    color: var(--highlight);
    font-size: 0.35rem;
    opacity: 0.55;
    letter-spacing: 1.2em;
    white-space: nowrap;
    pointer-events: none;
}

.cal-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.85rem);
    color: var(--text-bright);
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.15;
}

.cal-lede {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--text-dim);
    margin: 0.5rem 0 0;
    letter-spacing: 0.01em;
}

/* ---------------- Moment card ---------------- */

.cal-moment {
    position: relative;
    background:
        linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 2.75rem 2rem 2.25rem;
    text-align: center;
    margin-bottom: 3rem;
    overflow: hidden;
}

/* L-shaped gilded corner frames */
.cal-moment::before,
.cal-moment::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 1px solid var(--highlight);
    opacity: 0.4;
    pointer-events: none;
}
.cal-moment::before {
    top: 10px; left: 10px;
    border-right: none;
    border-bottom: none;
}
.cal-moment::after {
    bottom: 10px; right: 10px;
    border-left: none;
    border-top: none;
}

.cal-moment-label {
    display: block;
    font-family: var(--font-prose);
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 0.6rem;
    color: var(--text-dim);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.cal-moment-primary {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    line-height: 1.05;
    color: var(--text-bright);
    letter-spacing: 0.01em;
}

.cal-moment-day {
    color: var(--highlight);
    font-style: italic;
    font-weight: 500;
    font-variant-numeric: tabular-nums oldstyle-nums;
    font-feature-settings: 'onum';
}

.cal-moment-sep-small {
    color: var(--text-dim);
    opacity: 0.4;
    font-weight: 300;
}

.cal-moment-month {
    color: var(--text-bright);
    font-weight: 400;
}

.cal-moment-secondary {
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

.cal-moment-num {
    color: var(--text);
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.cal-moment-dot {
    display: inline-block;
    margin: 0 0.85rem;
    color: var(--highlight);
    font-size: 0.45rem;
    opacity: 0.55;
    vertical-align: middle;
}

.cal-moment-season {
    color: var(--accent);
    font-style: italic;
}

/* ---------------- Split: grid + wheel ---------------- */

.cal-split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3rem;
    margin-bottom: 3.5rem;
}

.cal-section-kicker {
    font-family: var(--font-prose);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 0.6rem;
    color: var(--text-dim);
    font-weight: 500;
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.cal-subhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.cal-subhead-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--text-bright);
    letter-spacing: 0.01em;
}

.cal-subhead-meta {
    font-family: var(--font-prose);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.58rem;
    color: var(--text-dim);
}

/* ---------------- Month grid ---------------- */

.cal-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    padding: 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.15);
}

.cal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums oldstyle-nums;
    font-size: 0.9rem;
    color: var(--text-dim);
    background: var(--bg-secondary);
    border-radius: 2px;
    position: relative;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.cal-cell:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.cal-cell.cal-today {
    color: var(--bg-body);
    background: var(--highlight);
    font-weight: 500;
    font-style: italic;
    box-shadow:
        0 0 0 2px rgba(var(--highlight-rgb), 0.28),
        0 2px 10px rgba(var(--highlight-rgb), 0.25);
    z-index: 1;
}

.cal-cell.cal-today::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
}

.cal-grid-legend {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0 4px;
    font-family: var(--font-prose);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.55rem;
    color: var(--text-dim);
}

.cal-grid-legend-bar {
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ---------------- Year wheel ---------------- */

.cal-wheel-section {
    display: flex;
    flex-direction: column;
}

.cal-wheel-stage {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0.5rem auto 0.75rem;
    flex-shrink: 0;
}

.cal-wheel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(155, 181, 138, 0.65) 0deg  60deg,   /* Life    */
        rgba(168, 161, 114, 0.65) 60deg 120deg,  /* Nature  */
        rgba(196, 168, 114, 0.72) 120deg 180deg, /* Balance */
        rgba(160, 124, 92, 0.65) 180deg 240deg,  /* Chaos   */
        rgba(74, 86, 104, 0.82) 240deg 300deg,   /* Death   */
        rgba(106, 117, 133, 0.72) 300deg 360deg  /* Order   */
    );
    box-shadow:
        inset 0 0 0 1px rgba(var(--warm-white-rgb), 0.06),
        inset 0 0 36px rgba(0, 0, 0, 0.3),
        0 10px 36px rgba(0, 0, 0, 0.35);
}

/* Outer decorative ring */
.cal-wheel::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--border);
    pointer-events: none;
}

/* Gilded hairline just inside the outer ring */
.cal-wheel::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid rgba(var(--highlight-rgb), 0.18);
    pointer-events: none;
}

/* Inner face — where the needle sits against a dark ground */
.cal-wheel-face {
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 50% 45%,
            var(--bg-secondary) 0%,
            var(--bg-body) 100%
        );
    box-shadow:
        inset 0 0 0 1px rgba(var(--highlight-rgb), 0.12),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Tick marks at month boundaries */
.cal-wheel-ticks {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            from -0.5deg,
            rgba(var(--warm-white-rgb), 0.22) 0deg 1deg,
            transparent 1deg 60deg,
            rgba(var(--warm-white-rgb), 0.22) 60deg 61deg,
            transparent 61deg 120deg,
            rgba(var(--warm-white-rgb), 0.22) 120deg 121deg,
            transparent 121deg 180deg,
            rgba(var(--warm-white-rgb), 0.22) 180deg 181deg,
            transparent 181deg 240deg,
            rgba(var(--warm-white-rgb), 0.22) 240deg 241deg,
            transparent 241deg 300deg,
            rgba(var(--warm-white-rgb), 0.22) 300deg 301deg,
            transparent 301deg 360deg
        );
    mask: radial-gradient(circle, transparent 48%, #000 49%, #000 100%);
    -webkit-mask: radial-gradient(circle, transparent 48%, #000 49%, #000 100%);
    pointer-events: none;
}

/* Needle: gold line from center outward, pointing to current time */
.cal-wheel-needle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 48%;
    background: linear-gradient(
        to top,
        var(--highlight) 0%,
        var(--highlight) 55%,
        rgba(var(--highlight-rgb), 0.65) 85%,
        transparent 100%
    );
    border-radius: 2px;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(0deg);
    transition: transform 0.9s cubic-bezier(0.33, 1, 0.68, 1);
    z-index: 3;
    box-shadow: 0 0 8px rgba(var(--highlight-rgb), 0.55);
}

/* Needle tip — small gold diamond */
.cal-wheel-needle::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    width: 7px;
    height: 7px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--highlight);
    box-shadow: 0 0 6px rgba(var(--highlight-rgb), 0.6);
}

/* Counter-weight at bottom of needle for balance */
.cal-wheel-needle::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 5px;
    height: 5px;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(var(--highlight-rgb), 0.55);
}

/* Central hub */
.cal-wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--highlight);
    transform: translate(-50%, -50%);
    z-index: 4;
    box-shadow:
        0 0 0 3px var(--bg-body),
        0 0 0 4px rgba(var(--highlight-rgb), 0.35);
}

/* Month labels around the wheel — positioned via transform chain */
.cal-wheel-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cal-wheel-label {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text);
    white-space: nowrap;
    --r: 148px;
}

.cal-wheel-l0 { transform: translate(-50%, -50%) rotate( 30deg) translateY(calc(var(--r) * -1)) rotate(-30deg); }
.cal-wheel-l1 { transform: translate(-50%, -50%) rotate( 90deg) translateY(calc(var(--r) * -1)) rotate(-90deg); }
.cal-wheel-l2 { transform: translate(-50%, -50%) rotate(150deg) translateY(calc(var(--r) * -1)) rotate(-150deg); }
.cal-wheel-l3 { transform: translate(-50%, -50%) rotate(210deg) translateY(calc(var(--r) * -1)) rotate(-210deg); }
.cal-wheel-l4 { transform: translate(-50%, -50%) rotate(270deg) translateY(calc(var(--r) * -1)) rotate(-270deg); }
.cal-wheel-l5 { transform: translate(-50%, -50%) rotate(330deg) translateY(calc(var(--r) * -1)) rotate(-330deg); }

.cal-wheel-caption {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--text-dim);
    text-align: center;
    margin: 1rem 0 0;
    line-height: 1.5;
    max-width: 320px;
    align-self: center;
}

/* ---------------- Six months legend ---------------- */

.cal-months {
    border-top: 1px solid var(--border);
    padding-top: 2rem;
}

.cal-months-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-panel);
    overflow: hidden;
}

.cal-month-card {
    padding: 1.5rem 0.75rem 1.35rem;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    position: relative;
    transition: background 0.2s;
}

.cal-month-card:last-child { border-right: none; }

.cal-month-card:hover {
    background: var(--bg-hover);
}

/* Top accent bar colored by the season's wheel sector */
.cal-month-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.65;
}

.cal-month-card[data-idx="0"] { color: var(--cal-life); }
.cal-month-card[data-idx="1"] { color: var(--cal-nature); }
.cal-month-card[data-idx="2"] { color: var(--cal-balance); }
.cal-month-card[data-idx="3"] { color: var(--cal-chaos); }
.cal-month-card[data-idx="4"] { color: var(--cal-death); }
.cal-month-card[data-idx="5"] { color: var(--cal-order); }

.cal-month-glyph {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-bottom: 0.15rem;
    box-shadow: 0 0 0 3px rgba(var(--warm-white-rgb), 0.03);
}

.cal-month-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--text-bright);
    letter-spacing: 0.02em;
}

.cal-month-season {
    font-family: var(--font-prose);
    font-style: italic;
    font-size: 0.7rem;
    color: var(--text);
    text-transform: lowercase;
    line-height: 1.3;
}

.cal-month-temp {
    font-family: var(--font-prose);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    font-size: 0.68rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    margin-top: 0.35rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--border);
    width: 100%;
    text-align: center;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 860px) {
    .cal-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .cal-wheel-stage {
        width: 240px;
        height: 240px;
    }
    .cal-wheel-label { --r: 136px; }

    .cal-months-list {
        grid-template-columns: repeat(3, 1fr);
    }
    .cal-months-list .cal-month-card:nth-child(3n) {
        border-right: none;
    }
    .cal-months-list .cal-month-card:nth-child(-n+3) {
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 560px) {
    .cal-page { padding: 0 1rem; margin-top: 1.5rem; }
    .cal-header { padding: 1.25rem 0 0.75rem; margin-bottom: 2rem; }
    .cal-moment { padding: 2rem 1.25rem 1.75rem; margin-bottom: 2rem; }
    .cal-moment-secondary { font-size: 0.9rem; }
    .cal-moment-dot { margin: 0 0.5rem; }

    .cal-wheel-stage {
        width: 220px;
        height: 220px;
    }
    .cal-wheel-label {
        font-size: 0.65rem;
        --r: 126px;
    }

    .cal-grid { padding: 6px; gap: 2px; }
    .cal-cell { font-size: 0.75rem; }

    .cal-months-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .cal-months-list .cal-month-card {
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }
    .cal-months-list .cal-month-card:nth-child(2n) {
        border-right: none;
    }
    .cal-months-list .cal-month-card:nth-last-child(-n+2) {
        border-bottom: none;
    }
}

/* Parchment scheme — lighten the moment frame corners and wheel ring */
[data-theme="redesign"][data-scheme="parchment"] .cal-moment::before,
[data-theme="redesign"][data-scheme="parchment"] .cal-moment::after {
    opacity: 0.55;
}

[data-theme="redesign"][data-scheme="parchment"] .cal-header-rule::before,
[data-theme="redesign"][data-scheme="parchment"] .cal-header-rule::after {
    background: var(--bg-body);
}

[data-theme="redesign"][data-scheme="parchment"] .cal-wheel {
    box-shadow:
        inset 0 0 0 1px rgba(80, 68, 48, 0.1),
        inset 0 0 30px rgba(80, 68, 48, 0.12),
        0 10px 28px rgba(80, 68, 48, 0.2);
}

[data-theme="redesign"][data-scheme="parchment"] .cal-grid {
    box-shadow: inset 0 0 24px rgba(80, 68, 48, 0.1);
}