/* One predictable calendar layout for every habit card. */
#habits,.habitsection,#habits.cards{width:100%;max-width:none}
#habits.cards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;align-items:stretch}
#habits.cards.list{grid-template-columns:minmax(0,1fr)!important;gap:18px!important;align-items:stretch}
#habits.cards>.habit{height:100%;min-height:0;display:flex;flex-direction:column}
#habits .habitTopDetails{display:flex;align-items:center;gap:12px;overflow-x:auto;white-space:nowrap;padding:10px 0;margin:0}
#habits .habitTopDetails .metarow,#habits .habitTopDetails .habitfoot{display:flex;align-items:center;gap:12px;flex:none;margin:0;padding:0;border:0;font-size:10px}
#habits .habitTopDetails .metarow:empty{display:none}
#habits .habitTopDetails .daynotes{flex:none;margin:0;padding:0;font-size:10px}
#habits .boardScroller{overflow-x:auto;min-height:112px;padding:8px 0;scroll-snap-type:x proximity}
#habits .monthBoards{display:flex;align-items:flex-start;gap:18px;width:max-content;min-width:100%}
#habits .monthGroup{width:112px;flex:0 0 112px;scroll-snap-align:start}
#habits .monthHeatmap{display:grid!important;grid-template-columns:repeat(5,12px)!important;grid-template-rows:repeat(7,12px)!important;grid-auto-flow:column;gap:3px;min-width:0!important;width:max-content!important;margin:0 auto!important}
#habits .monthHeatmap .cell{width:12px!important;height:12px!important;min-height:0!important;max-width:none!important;aspect-ratio:1;border:0!important;box-shadow:none!important;border-radius:var(--radius,3px)!important}
#habits .monthSpacer{display:none!important}
#habits .monthCaption{margin-top:8px;text-align:center;white-space:nowrap;color:var(--muted);font-size:10px;line-height:1.2}
#habits .monthHeatmap .cell.on{background:var(--c)!important}
#habits .monthHeatmap .cell:focus-visible{outline:2px solid var(--c)!important;outline-offset:2px}
/* Expanded cards retain the same compact calendar—only the card grid changes. */
#habits.cards.list .monthHeatmap{grid-template-columns:repeat(5,12px)!important;grid-template-rows:repeat(7,12px)!important}
@media(max-width:1250px){#habits.cards:not(.list){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){#habits.cards,#habits.cards.list{grid-template-columns:1fr!important}}