.local-calendar { --local-green: #426b59; --local-line: rgba(80, 100, 77, .2); max-width: 1020px; margin: auto; }
.local-calendar h1, .local-calendar h2, .local-calendar h3 { font-family: 'STKaiti','KaiTi','SimSun',serif; font-weight: 500; }
.local-calendar h1 { margin: .2rem 0 .5rem; font-size: clamp(2rem, 5vw, 3.1rem); }
.local-calendar h2 { font-size: 1.35rem; margin: .2rem 0 .7rem; }
.local-calendar p { line-height: 1.8; }
.calendar-eyebrow { color: var(--local-green); font-size: .8rem; letter-spacing: .16em; margin: 0; }
.local-heading, .calendar-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.local-heading { margin-bottom: 1.8rem; align-items: flex-start; }
.local-heading .light { margin: .4rem 0; }
.city-picker { display: grid; gap: .5rem; padding-top: .4rem; }
.city-picker label, .year-picker label { color: var(--local-green); font-size: .9rem; }
.city-picker > div { display: flex; gap: .4rem; }
.city-picker select, .year-picker input { border: 1px solid #b8ab97; background: rgba(255,255,255,.45); padding: .55rem .7rem; color: var(--ink-main); font: inherit; }
.city-picker select { min-width: 145px; }
.calendar-notice { padding: .6rem .9rem; border-left: 3px solid var(--seal-red); background: rgba(182,59,52,.06); }
.local-term-hero { display: grid; grid-template-columns: 1fr 1.1fr; padding: 1.8rem 2rem; gap: 2rem; border: 1px solid var(--local-line); border-radius: 4px; background: radial-gradient(ellipse at 10% 70%, rgba(176,198,160,.23), transparent 70%), linear-gradient(135deg,#eef1e4,#f8f0df); }
.local-term-title h2 { font-size: clamp(3rem,7vw,4.5rem); margin: .3rem 0; letter-spacing: .16em; }
.local-term-title p:not(.calendar-eyebrow) { font-size: .94rem; margin: .3rem 0 1rem; }
.local-term-clock { align-self: center; padding-left: 1.8rem; border-left: 1px solid var(--local-line); }
.local-term-clock p { margin: .4rem 0; display: flex; justify-content: space-between; gap: .7rem; }
.local-term-clock strong { font-weight: 500; color: var(--local-green); }
.local-term-clock .next-countdown { color: var(--seal-red); margin: .9rem 0; font-size: 1.2rem; }
.local-term-clock small { color: #6c7568; line-height: 1.7; display: block; }
.calendar-section { margin-top: 1.4rem; padding: 1.3rem 1.5rem; border: 1px solid var(--local-line); background: rgba(255,255,255,.36); }
.calendar-section-heading h2 { margin-bottom: .1rem; }
#weatherStatus { min-height: 1.8em; font-size: .88rem; }
#weatherStatus[data-state="stale"], #weatherStatus[data-state="unavailable"] { color: #975337; }
.local-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .6rem; }
.local-metrics article { display: flex; flex-direction: column; gap: .5rem; padding: 1rem .8rem; background: rgba(230,235,218,.36); }
.local-metrics span { color: #6c7568; font-size: .82rem; }
.local-metrics strong { color: var(--local-green); font-size: clamp(1rem,1.6vw,1.25rem); font-weight: 500; }
.local-metrics small { font-size: .76rem; color: #778070; }
.forecast-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .4rem; margin-top: 1rem; }
.forecast-days[hidden] { display: none; }
.forecast-day { display: grid; gap: .4rem; padding: .7rem .5rem; border-top: 2px solid #b4c4a6; background: rgba(255,255,255,.3); text-align: center; }
.forecast-day span { font-size: .78rem; color: #777; }
.forecast-day strong { font-size: .93rem; color: var(--local-green); font-weight: 500; }
.forecast-day p { font-size: .82rem; margin: 0; }
.forecast-day small { color: #777; font-size: .73rem; line-height: 1.5; }
.calendar-source { font-size: .78rem; color: #777; margin: 1rem 0 0; }
.calendar-source a { color: var(--local-green); text-underline-offset: 3px; }
.daylight-chart { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .8rem; margin-top: 1rem; }
.daylight-column { display: grid; justify-items: center; gap: .5rem; min-width: 0; }
.daylight-value { font-size: .78rem; color: var(--local-green); white-space: nowrap; }
.daylight-bar-track { width: 100%; max-width: 54px; height: 125px; background: rgba(182,177,154,.12); display: flex; align-items: flex-end; border-radius: 3px 3px 0 0; }
.daylight-bar { width: 100%; background: linear-gradient(#9da979,#55735b); border-radius: 3px 3px 0 0; transition: height .5s ease; }
.daylight-column time { font-size: .8rem; color: #777; }
.daylight-trend { color: var(--local-green); font-size: .88rem; text-align: right; margin-bottom: 0; }
.local-culture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.local-culture-grid .calendar-section { margin-top: 1rem; }
.local-culture-grid p { font-size: .95rem; }
.local-culture-grid .light, .local-variants .light { font-size: .83rem; }
.local-variants summary { color: var(--local-green); cursor: pointer; }
.local-ai-invite { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border-left: 3px solid var(--seal-red); }
.local-ai-invite .seal-btn { flex: 0 0 auto; text-decoration: none; }
.local-ai-invite p:not(.calendar-eyebrow) { font-size: .9rem; margin-bottom: 0; }
.year-picker { display: flex; align-items: center; gap: .4rem; }
.year-picker input { width: 90px; padding: .35rem .4rem; }
.annual-term-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .6rem; }
.annual-term { display: flex; align-items: center; gap: .65rem; padding: .8rem .65rem; border: 1px solid rgba(130,127,104,.18); background: rgba(255,255,255,.26); }
.annual-term-index { color: #a5aa99; font: .85rem Georgia,serif; }
.annual-term h3 { margin: 0 0 .25rem; font-size: 1.12rem; }
.annual-term a { color: inherit; text-decoration: none; }
.annual-term a:hover { color: var(--seal-red); }
.annual-term time { color: #777; font-size: .77rem; }
.annual-term.is-current { background: rgba(182,59,52,.06); border-color: rgba(182,59,52,.38); }
.annual-term h3 small { font-size: .68rem; color: var(--seal-red); margin-left: .3rem; }
.local-calendar button:disabled { cursor: wait; opacity: .65; }
.local-calendar :focus-visible { outline: 2px solid var(--local-green); outline-offset: 3px; }
@media (max-width: 900px) { .local-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } .forecast-days { grid-template-columns: repeat(4,minmax(0,1fr)); } .annual-term-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 620px) { .local-heading, .calendar-section-heading, .local-ai-invite { flex-direction: column; align-items: flex-start; } .local-heading { gap: .7rem; } .local-term-hero { grid-template-columns: 1fr; padding: 1.2rem; gap: 1rem; } .local-term-clock { padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--local-line); width: 100%; } .calendar-section { padding: 1rem .8rem; } .local-culture-grid { grid-template-columns: 1fr; gap: 0; } .annual-term-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .forecast-days { grid-template-columns: repeat(2,minmax(0,1fr)); } .daylight-chart { gap: .3rem; } .daylight-value { font-size: .65rem; } .daylight-bar-track { max-width: 28px; } .local-term-clock p { font-size: .87rem; } }
@media (prefers-reduced-motion: reduce) { .daylight-bar { transition: none; } }