/* Page-local to "How the habit system works": example habit rows, the Today
   ring loop, and milestone badges. Ported from How Habits Work.html; the rows
   that the design mounted as the live React HabitRow are rendered statically. */
.hrow { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 14px; padding: 14px 16px; background: var(--tmb-surface); border: 1px solid var(--tmb-border); border-radius: var(--tmb-radius-xl); box-shadow: var(--tmb-shadow-xs); }
.hrow + .hrow { margin-top: 10px; }
.hrow .glyph { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; }
.hrow .glyph svg { width: 20px; height: 20px; }
.hrow .ht { font-size: 15px; font-weight: 700; color: var(--tmb-fg-1); letter-spacing: -0.005em; }
.hrow .hs { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--tmb-fg-3); }
.hrow .hs .goal { color: var(--tmb-brand-dark-from); }
.hrow .hs .goal.avoid { color: #64748b; }
.hrow .streak { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hrow .streak b { font-size: 15px; font-weight: 800; color: var(--tmb-fg-1); font-variant-numeric: tabular-nums; line-height: 1; }
.hrow .streak s { font-size: 9px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tmb-fg-3); }
.star { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.star svg { width: 16px; height: 16px; }
.star.on { background: rgba(245,158,11,.14); color: #d97706; }
.star.on svg { fill: currentColor; }
.star.off { color: var(--tmb-fg-4); }

.loop { display: flex; align-items: center; gap: 24px; margin: 24px 0 0; padding: 24px; background: var(--tmb-surface); border: 1px solid var(--tmb-border); border-radius: var(--tmb-radius-2xl); box-shadow: var(--tmb-shadow-sm); max-width: 66ch; flex-wrap: wrap; }
.ring { width: 116px; height: 116px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--tmb-brand-light-to) 0 72%, var(--tmb-surface-soft) 72% 100%); }
.ring .hole { width: 82px; height: 82px; border-radius: 50%; background: var(--tmb-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.ring .hole b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--tmb-fg-1); font-variant-numeric: tabular-nums; line-height: 1; }
.ring .hole b s { font-size: 15px; font-weight: 800; color: var(--tmb-fg-3); text-decoration: none; }
.ring .hole span { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tmb-fg-3); }
.loop .chips { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 12px; }
.loop .chips .cline { font-size: 14px; line-height: 1.5; color: var(--tmb-fg-2); }
.loop .chips .cwrap { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.chip i { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.chip.met { background: var(--tmb-success-soft); border: 1px solid rgba(34,197,94,.3); color: #15803d; }
.chip.met i { background: var(--tmb-success); }
.chip.open { background: var(--tmb-surface-soft); border: 1px solid var(--tmb-border); color: var(--tmb-fg-3); }
.chip.open i { background: var(--tmb-fg-4); opacity: .5; }

.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0 0; max-width: 66ch; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: var(--tmb-radius-lg); text-align: center; }
.badge.earned { background: var(--tmb-surface); border: 1px solid var(--tmb-border); box-shadow: var(--tmb-shadow-xs); }
.badge.locked { border: 1px dashed var(--tmb-border); opacity: .55; }
.badge .med { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.badge .med svg { width: 17px; height: 17px; }
.badge.earned .med { background: var(--tmb-grad-light); color: #fff; box-shadow: var(--tmb-glow-brand-sm); }
.badge.locked .med { background: var(--tmb-surface-soft); color: var(--tmb-fg-4); }
.badge b { font-size: 12px; font-weight: 800; color: var(--tmb-fg-1); line-height: 1.1; }
.badge span { font-size: 10.5px; font-weight: 600; color: var(--tmb-fg-3); }
@media (max-width: 720px) { .badges { grid-template-columns: repeat(2, 1fr); } }