/*
Career-year selector for the map.
Integration: load after styles.css in :
*/
.career-year-selector{margin:0 12px 12px;padding:12px 18px;border:1px solid #b6b2a7;border-top:3px solid var(--rust-text,#9c3f27);background:linear-gradient(90deg,#f4f1e8 0%,#e9e6dc 100%);box-shadow:inset 0 1px #fff8}
.career-year-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:9px}
.career-year-heading h2{margin:2px 0 0;color:var(--ink,#202d29);font:500 clamp(19px,1.8vw,24px)/1.02 var(--font-display,Georgia,serif);letter-spacing:-.025em}
.career-year-kicker{margin:0;color:var(--rust-text,#9c3f27);font:700 var(--t-label,10px)/1.25 var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase}
.career-year-note{max-width:440px;margin:0;color:var(--soft,#566058);font:var(--t-note,12px)/1.45 var(--font-body,system-ui,sans-serif);text-align:right}
.career-year-control{display:grid;grid-template-columns:34px minmax(0,1fr) 34px auto;gap:10px;align-items:center}
.career-year-step{width:34px;height:34px;border:1px solid #788078;background:#faf8f1;color:var(--ink,#202d29);font:20px/1 var(--font-display,Georgia,serif);cursor:pointer}
.career-year-step:hover,.career-year-step:focus-visible{border-color:var(--rust-text,#9c3f27);color:var(--rust-text,#9c3f27);outline:2px solid var(--rust-text,#9c3f27);outline-offset:2px}
.career-year-range-wrap{display:grid;gap:8px;min-width:0}
.career-year-range-wrap>label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.career-year-range{width:100%;height:5px;margin:2px 0 0;accent-color:var(--rust-text,#9c3f27);cursor:pointer}
.career-year-range:focus-visible{outline:2px solid var(--rust-text,#9c3f27);outline-offset:4px}
.career-year-ticks{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:0;border-top:1px solid #b9b6ac}
.career-year-ticks button{min-width:0;padding:7px 3px 1px;border:0;border-left:1px solid #c8c4b9;background:transparent;color:var(--soft,#566058);font:var(--t-label,10px)/1.15 var(--font-mono,monospace);letter-spacing:.02em;cursor:pointer}
.career-year-ticks button:first-child{border-left:0}
.career-year-ticks button:hover,.career-year-ticks button:focus-visible{color:var(--rust-text,#9c3f27);outline:2px solid var(--rust-text,#9c3f27);outline-offset:-1px}
.career-year-ticks button.is-current-year{color:var(--rust-text,#9c3f27);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.career-year-output{min-width:94px;padding:8px 10px;border:1px solid #788078;background:#faf8f1;color:var(--ink,#202d29);font:700 var(--t-label,10px)/1.2 var(--font-mono,monospace);letter-spacing:.08em;text-align:center;text-transform:uppercase}
.career-year-result{min-height:1.4em;margin:8px 0 0;padding-top:7px;border-top:1px dashed #bebaae;color:var(--soft,#566058);font:var(--t-note,12px)/1.4 var(--font-body,system-ui,sans-serif)}
/* This is intentionally a second state to the map's selected-site .on state. */
#atlas .plate.year-active .lift{filter:drop-shadow(0 5px 4px #9c3f2740)}
#atlas .plate.year-active .ttl{fill:var(--rust-text,#9c3f27)}
#atlas .plate.year-active>rect{height:4px}
/* Once the timeline is used, plates outside the chosen year recede so the timeline reads at a glance. */
#atlas .plate{transition:opacity .35s ease}
#atlas.year-mode .plate:not(.year-active):not(:hover){opacity:.42}
.stats .stat.year-active{position:relative;background:#f8f5ed;box-shadow:inset 0 3px var(--rust-text,#9c3f27)}
.stats .stat.year-active::after{content:"IN YEAR";position:absolute;right:9px;bottom:8px;color:var(--rust-text,#9c3f27);font:700 8px/1 var(--font-mono,monospace);letter-spacing:.1em}
.mstack .mcard.year-active{box-shadow:inset 3px 0 var(--rust-text,#9c3f27),0 5px 16px #30392f18}
@media(max-width:760px){.career-year-selector{margin:0 0 14px;padding:12px 15px}.career-year-heading{align-items:start;flex-direction:column;gap:6px}.career-year-note{max-width:55rem;text-align:left}.career-year-control{grid-template-columns:32px minmax(0,1fr) 32px}.career-year-step{width:32px;height:32px}.career-year-output{grid-column:1/-1;justify-self:start;min-width:112px}.career-year-ticks button{padding-top:8px;font-size:9px}.career-year-result{margin-top:8px}.stats .stat.year-active::after{right:8px;bottom:7px}}
@media(max-width:420px){.career-year-ticks button{font-size:8px;letter-spacing:0}.career-year-selector{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){#atlas .plate.year-active .lift{filter:none}}