.bht-app {
max-width: 100%;
overflow-wrap: anywhere;
}
.bht-app img,
.bht-app table {
max-width: 100%;
} @media (max-width: 359px) {
.bht-shell {
padding: 8px;
}
.bht-card {
padding: 12px;
}
.bht-hero__title {
font-size: 1.3rem;
}
.bht-ring {
width: 76px;
height: 76px;
}
.bht-app a.bht-nav__link {
font-size: 0.58rem;
letter-spacing: -0.01em;
}
.bht-app .bht-day {
min-height: 44px;
}
.bht-wwyd__grid {
gap: 8px;
}
.bht-challenge__head {
grid-template-columns: auto 1fr;
}
.bht-challenge__head .bht-badge {
grid-column: 1 / -1;
justify-self: start;
}
} @media (min-width: 560px) {
.bht-stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bht-profile .bht-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bht-quick {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bht-achievement-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bht-wwyd__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bht-starter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bht-profile__card {
flex-direction: row;
text-align: left;
}
.bht-profile__photo {
width: 112px;
height: 112px;
}
.bht-toast-region {
bottom: 96px;
}
} @media (min-width: 768px) {
.bht-shell {
padding: 20px;
gap: 20px;
}
.bht-nav {
order: 0;
position: sticky;
top: 8px;
bottom: auto;
box-shadow: var(--bht-shadow);
}
.bht-app a.bht-nav__link {
flex-direction: row;
gap: 8px;
min-height: 48px;
padding: 8px 14px;
font-size: 0.92rem;
}
.bht-hero {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 24px;
}
.bht-hero__title {
font-size: 1.8rem;
}
.bht-ring {
width: 104px;
height: 104px;
}
.bht-habit-card {
grid-template-columns: auto 1fr auto;
align-items: center;
}
.bht-habit-card__actions {
grid-column: auto;
min-width: 190px;
align-items: stretch;
}
.bht-challenge-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bht-achievement-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bht-achievement-grid--compact {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bht-app .bht-day {
min-height: 64px;
}
.bht-day__num {
font-size: 0.95rem;
}
.bht-day__sym {
font-size: 1.1rem;
}
.bht-app .bht-calendar__table {
border-spacing: 6px;
}
.bht-toast-region {
bottom: 24px;
}
} @media (min-width: 1024px) {
.bht-shell {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.bht-challenge-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bht-achievement-grid--compact {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bht-challenge-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
} @media (min-width: 1440px) {
.bht-shell {
max-width: 1200px;
}
} @media (prefers-reduced-motion: reduce) {
.bht-app *,
.bht-dialog *,
.bht-toast {
animation: none !important;
transition: none !important;
}
} @media (forced-colors: active) {
.bht-card,
.bht-habit-card,
.bht-app .bht-day,
.bht-app .bht-btn {
border: 2px solid CanvasText;
}
}