/* Home dashboard: greeting, weather card, app launcher grid. */
.home { flex: 1; justify-content: center; gap: 32px }
.hero { display: flex; align-items: center; justify-content: space-between; gap: 24px }

.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px }
.app { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 16px; background: var(--surface-container-highest); transition: box-shadow .15s, transform .15s }
.app .ms { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 24px; font-size: 54px; background: var(--surface-container-highest); color: var(--primary) }
a.app:hover { box-shadow: var(--e2); transform: translateY(-2px) }
.app.soon { opacity: .45; cursor: default }

.wx-widget { display: flex; align-items: center; gap: 16px; width: min(100%, 420px); padding: 12px 20px 12px 14px; border-radius: 16px; background: var(--secondary-container); color: var(--on-secondary-container); transition: box-shadow .15s, transform .15s }
.wx-widget:hover { box-shadow: var(--e2); transform: translateY(-2px) }
.wx-widget .big { font-size: 44px; width: 56px; height: 56px; display: grid; place-items: center; flex: none; font-variation-settings: 'FILL' 1 }
.wx-widget-text { flex: 1; min-width: 0; font-size: 13px; opacity: .85 } .wx-widget-text .title { opacity: 1 }
.wx-widget-temp { font-size: 36px; line-height: 1; font-weight: 400 }

/* Today strip: a small card per app; quiet when there's nothing to act on */
.today { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px }
.tcard { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--surface-container); transition: box-shadow .15s, transform .15s }
.tcard:hover { box-shadow: var(--e1) }
.tcard-head { display: flex; align-items: center; gap: 8px; align-self: flex-start; margin-bottom: 2px; padding-right: 4px; border-radius: 8px; font-size: 12px; font-weight: 500; letter-spacing: .3px; color: var(--on-surface-variant) } .tcard-head .ms { font-size: 18px; color: var(--primary) }
.tcard-head .go { margin-left: -6px; color: var(--on-surface-variant); transition: transform .15s } .tcard-head:hover { color: var(--on-surface) } .tcard-head:hover .go { transform: translateX(2px); color: var(--on-surface) }
.tcard-body { all: unset; display: flex; flex-direction: column; gap: 4px; min-width: 0; cursor: pointer; border-radius: 8px } .tcard-body:focus-visible, .tcard-head:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px }
.tcard-main { font-size: 16px; line-height: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .tcard-main .muted { font-weight: 400 }
.tcard-sub { font-size: 12px; line-height: 16px; color: var(--on-surface-variant); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } /* up to two lines */
.tcard.quiet .tcard-main { color: var(--on-surface-variant); font-weight: 400 }
/* nothing today and nothing in the next 7 days: the whole card greys out (lower surface, dimmed content, neutral icon); hovering or focusing it brings it
   back, because it still opens its app */
.tcard { transition: box-shadow .15s, background .3s } .tcard > * { transition: opacity .3s }
.tcard.quiet { background: var(--surface-container-low) } .tcard.quiet > * { opacity: .5 } .tcard.quiet .tcard-head .ms { color: var(--on-surface-variant) }
.tcard.quiet:hover > *, .tcard.quiet:focus-within > * { opacity: 1 }
/* several items: fade through them (out 90 ms, in 210 ms), dots show where you are */
.tcard { position: relative }
/* the outgoing item during a cross-fade: a copy laid over the content, same place and width, not clickable */
.tcard-ghost { position: absolute; display: flex; flex-direction: column; gap: 4px; min-width: 0; pointer-events: none }
.tcard-dots { position: absolute; top: 16px; right: 16px; display: flex; gap: 4px } .tcard-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--outline-variant) } .tcard-dots i.on { background: var(--primary) } .tcard-dots { align-items: center } .tcard-dots i { transition: transform .2s, opacity .2s } .tcard-dots i.edge { transform: scale(.6); opacity: .55 }
.today .up { color: var(--primary) } .today .down { color: var(--error) }

@media (max-width: 700px) { .hero { flex-direction: column; align-items: stretch } .today { grid-template-columns: 1fr 1fr } }