/* ============================================================================
   365-Day Threshold Forecast — your entryway's year ahead, as a living chart
   Apple Liquid Glass surface, orange-risk heatmap, scrub tooltip, stat cards,
   reorder calendar. Uses the site's existing design tokens (index.html :root),
   honors light/dark + prefers-reduced-motion.
   ============================================================================ */

.year-shell {
    --year-risk-cal:  color-mix(in oklab, var(--accent) 8%, transparent);
    width: min(1180px, 100%);
    margin: 0 auto;
    border: 1px solid color-mix(in oklab, var(--hairline) 70%, transparent);
    border-radius: 34px;
    padding: clamp(22px, 3vw, 34px);
    background:
        linear-gradient(145deg,
            color-mix(in oklab, var(--surface) 82%, transparent),
            color-mix(in oklab, var(--bg-elevated) 60%, transparent)),
        color-mix(in oklab, var(--surface) 68%, transparent);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    box-shadow: var(--shadow-2), inset 0 1px 0 color-mix(in oklab, #fff 48%, transparent);
    position: relative;
    overflow: hidden;
}

/* ---- Header ---- */
.year-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: end;
    margin-bottom: 22px;
}
.year-headline h2 {
    margin: 10px 0 0;
    color: var(--ink);
    font-size: clamp(26px, 4vw, 46px);
    line-height: 1.02;
    letter-spacing: -0.05em;
}
.year-headline p {
    margin: 12px 0 0;
    color: var(--ink-3);
    line-height: 1.5;
    max-width: 64ch;
    font-size: 15px;
}
.year-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    min-width: 190px;
}
.year-controls .forecast-btn { width: 100%; }
.year-ics:disabled { opacity: 0.45; cursor: not-allowed; }
.year-ics:not(:disabled) {
    border-color: color-mix(in oklab, var(--accent) 50%, transparent);
    color: var(--accent);
    font-weight: 760;
}

/* ---- Status + legend ---- */
.year-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.year-status {
    font-size: 13px;
    color: var(--ink-3);
    font-weight: 560;
    letter-spacing: -0.01em;
}
.year-status[data-state="error"] { color: var(--accent-press); }
.year-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--ink-4);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.year-legend-scale {
    width: 120px;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--accent) 7%, var(--surface)),
        color-mix(in oklab, var(--accent) 32%, transparent),
        color-mix(in oklab, var(--accent) 66%, transparent),
        var(--accent));
    border: 1px solid color-mix(in oklab, var(--hairline) 60%, transparent);
}

/* ---- Heatmap ---- */
.year-heatmap-wrap {
    border-radius: 22px;
    border: 1px solid color-mix(in oklab, var(--hairline) 55%, transparent);
    background: color-mix(in oklab, var(--surface) 50%, transparent);
    padding: 14px 16px 18px;
    position: relative;
}
.year-months {
    display: grid;
    grid-auto-flow: column;
    margin-left: 34px;
    height: 16px;
    position: relative;
    color: var(--ink-4);
    font-size: 11px;
    letter-spacing: 0.01em;
    overflow: hidden;
}
.year-months span {
    position: absolute;
    white-space: nowrap;
    transition: opacity var(--t-med) var(--ease);
}
.year-heatmap-scroll {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.year-weekdays {
    display: grid;
    gap: 0;
    width: 26px;
    padding-top: 2px;
    font-size: 10px;
    color: var(--ink-4);
    height: 132px;
}
.year-weekdays span {
    line-height: 1;
    height: calc(132px / 3);
    display: flex;
    align-items: center;
}
.year-heatmap {
    display: block;
    width: 100%;
    max-width: 980px;
    height: auto;
    cursor: crosshair;
    touch-action: pan-y;
    border-radius: 6px;
}

/* ---- Floating tooltip ---- */
.year-tooltip {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    min-width: 210px;
    max-width: 280px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in oklab, var(--hairline) 75%, transparent);
    background: color-mix(in oklab, var(--surface) 78%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    backdrop-filter: blur(24px) saturate(200%);
    box-shadow: var(--shadow-3), inset 0 1px 0 color-mix(in oklab, #fff 40%, transparent);
    color: var(--ink);
    transform: translateY(4px);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring);
}
.year-tooltip[hidden] { display: none; }
.year-tt-date {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-4);
    margin-bottom: 4px;
}
.year-tt-score {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.year-tt-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
    flex: none;
}
.year-tt-score b { font-size: 15px; letter-spacing: -0.02em; }
.year-tt-score em {
    margin-left: auto;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-weight: 760;
    color: var(--ink-2);
    font-size: 13px;
}
.year-tt-mat {
    font-size: 13px;
    font-weight: 680;
    color: var(--accent);
    margin-bottom: 3px;
}
.year-tt-detail {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
}

/* ---- Stat cards ---- */
.year-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 20px;
}
.year-stat {
    border-radius: 18px;
    border: 1px solid color-mix(in oklab, var(--hairline) 55%, transparent);
    background: color-mix(in oklab, var(--surface) 62%, transparent);
    padding: 16px 16px 14px;
    display: grid;
    gap: 4px;
    align-content: start;
    transition: transform var(--t-med) var(--ease-spring), border-color var(--t-med) var(--ease);
}
.year-stat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--accent) 28%, transparent);
}
.year-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-4);
}
.year-stat b {
    font-size: clamp(20px, 2.4vw, 27px);
    color: var(--ink);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.year-stat p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.4;
}

/* ---- Reorder calendar ---- */
.year-calendar {
    margin-top: 18px;
    border-radius: 18px;
    border: 1px solid color-mix(in oklab, var(--hairline) 55%, transparent);
    background: color-mix(in oklab, var(--surface) 58%, transparent);
    padding: 18px 20px 14px;
    animation: year-cal-in 0.4s var(--ease-spring) both;
}
.year-calendar[hidden] { display: none; }
@keyframes year-cal-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.year-cal-head h3 {
    margin: 0;
    font-size: 17px;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.year-cal-head p {
    margin: 4px 0 12px;
    font-size: 13px;
    color: var(--ink-3);
}
.year-cal-list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: 8px;
}
.year-cal-list li {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--surface) 70%, transparent);
    border: 1px solid color-mix(in oklab, var(--hairline) 45%, transparent);
    font-size: 13px;
}
.year-cal-date {
    font-variant-numeric: tabular-nums;
    font-weight: 720;
    color: var(--accent);
    letter-spacing: -0.01em;
}
.year-cal-title { color: var(--ink); font-weight: 600; }
.year-cal-note { color: var(--ink-4); font-size: 12px; text-align: right; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
    .year-head { grid-template-columns: 1fr; align-items: start; }
    .year-controls { flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .year-controls .forecast-btn { width: auto; flex: 1 1 140px; }
    .year-stats { grid-template-columns: repeat(2, 1fr); }
    .year-cal-list li { grid-template-columns: 80px 1fr; }
    .year-cal-note { display: none; }
}
@media (max-width: 520px) {
    .year-stats { grid-template-columns: 1fr; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .year-stat,
    .year-tooltip,
    .year-calendar { transition: none; animation: none; }
}