/* ---------- hourly ---------- */
.card-head{display:flex;justify-content:space-between;align-items:center;padding-inline:24px;margin-bottom:6px;gap:10px}
.card-head h2{margin:0;font-size:16px;font-weight:600}
.hscroll{direction:ltr;overflow-x:auto;padding:6px 24px 12px;scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y;user-select:none}
.hscroll::-webkit-scrollbar{display:none}.hscroll.drag{cursor:grabbing}
.htrack{position:relative;display:flex;width:max-content}
.hour{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;border-radius:22px;position:relative;z-index:1;transition:background .3s,transform .4s var(--ease)}
.hour:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
.hour.now{background:linear-gradient(160deg,rgba(255,255,255,.4),rgba(255,255,255,.14));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),0 10px 18px -8px var(--shadow)}
.hour .t{font-size:13px;color:var(--ink-2)}
.hour svg{width:36px;height:36px}
.hour .d{font-weight:600;font-size:16px}
.hour .p{font-size:12px;color:#bfe3ff;min-height:16px;font-weight:500}
.curve{position:absolute;inset-inline-start:0;pointer-events:none;overflow:visible;z-index:0}
.curve path.line{fill:none;stroke:rgba(255,255,255,.95);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.6s var(--ease) .2s forwards;filter:drop-shadow(0 4px 6px rgba(10,20,50,.25))}
.curve path.area{fill:url(#gArea);opacity:0;animation:fadein 1s ease .9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fadein{to{opacity:1}}

/* ---------- daily ---------- */
.days{display:grid;gap:6px;margin-top:10px;flex:1;grid-auto-rows:minmax(0,1fr);align-content:stretch}
.day{display:grid;grid-template-columns:minmax(64px,1fr) 38px 40px 34px minmax(70px,1.6fr) 34px;align-items:center;gap:10px;padding:10px 14px;border-radius:20px;text-align:start;width:100%;position:relative;
  transition:background .3s,transform .4s var(--ease);animation:up .7s var(--ease) backwards;animation-delay:calc(var(--k)*60ms + 300ms)}
.day:hover{background:rgba(255,255,255,.12);transform:translateX(-3px)}
html[dir=ltr] .day:hover{transform:translateX(3px)}
.day[aria-pressed=true]{background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.12));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),0 12px 22px -10px var(--shadow)}
.day svg{width:34px;height:34px}
.day .n{font-weight:600}
.day .p{font-size:12px;color:#bfe3ff;font-weight:500;direction:ltr;text-align:center}
.day .lo{color:var(--ink-2);text-align:end;direction:ltr}
.day .hi{font-weight:600;direction:ltr}
.range{direction:ltr;position:relative;height:8px;border-radius:99px;background:rgba(10,20,50,.24);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.range b{position:absolute;inset-block:0;border-radius:99px;background:linear-gradient(90deg,#8fd8ff,#ffe38a,#ff9d66);transform-origin:left;animation:grow 1.1s var(--ease) backwards;animation-delay:calc(var(--k)*60ms + 500ms);box-shadow:0 2px 6px rgba(10,20,50,.25)}
@keyframes grow{from{transform:scaleX(0)}}

/* day row: low label sits beside the low end of the bar in both directions */
.day .n{order:1}.day svg{order:2}.day .p{order:3}
.day .lo{order:4;text-align:end}.day .range{order:5}.day .hi{order:6;text-align:start}
html[dir=rtl] .day .hi{order:4;text-align:start}html[dir=rtl] .day .lo{order:6;text-align:end}
.day{grid-template-columns:minmax(64px,1fr) 38px 40px 34px minmax(70px,1.6fr) 34px}
.sunbox .arc{margin-block:auto;max-width:420px;align-self:center}
@media (max-width:520px){.sun{inset-block-start:2%;opacity:.0}body[data-theme=clear-day] .sun{opacity:.8}}