/* Styles for the habits cards (js/cards/habits.js). Same rules as css/story.css: cqw units, --dk-* variables, no color-mix, filters or clip-path. */

/* best and worst days, weekdays: bars that go up for profit and down for loss around a zero line */
.dk-dbars{position:relative;display:flex;gap:.9cqw;height:26cqw}
.dk-dbars .z{position:absolute;left:0;right:0;top:50%;height:.5cqw;margin-top:-.25cqw;background:var(--dk-ink);opacity:.5;border-radius:1cqw;z-index:0}
.dk-dbars .d{position:relative;z-index:1;flex:1;min-width:0;display:flex;flex-direction:column}
.dk-dbars .u,.dk-dbars .n{flex:1;min-height:0;display:flex}
.dk-dbars .u{align-items:flex-end}
.dk-dbars .n{align-items:flex-start}
.dk-dbars i{display:block;width:100%;background:var(--dk-ink);opacity:.88}
.dk-dbars .u i{border-radius:.8cqw .8cqw 0 0}
.dk-dbars .n i{border-radius:0 0 .8cqw .8cqw}
.dk-dbars .hot i{background:var(--dk-hot);opacity:1;box-shadow:0 0 0 .6cqw var(--dk-ink)}
.dk-dbars-x{display:flex;gap:.9cqw;font:600 3cqw/1 var(--dk-mono);letter-spacing:.02em;text-align:center;margin-top:1.2cqw}
.dk-dbars-x span{flex:1;min-width:0}

/* a weekday name as the hero: long names shrink so they never run off the card */
.dk-wd{display:inline-block}
.dk-wd.w7{font-size:.95em}.dk-wd.w8{font-size:.86em}.dk-wd.w9{font-size:.84em}

/* streaks: a flame beside the number, and the streak's own dots in the accent color */
.dk-flame{display:inline-block;width:.68em;height:.85em;vertical-align:-.04em;margin-right:.06em}
.dk-dots i.run{background:var(--dk-hot)}
.dk-legend span.r{background:var(--dk-hot)}

/* tilt: two bars side by side on the front */
.dk-vs{display:grid;gap:2cqw}
.dk-vs>div{display:grid;grid-template-columns:23cqw 1fr auto;gap:3cqw;align-items:center;padding:2cqw 3.2cqw;background:rgba(var(--dk-bg-rgb),.9);border:.7cqw solid var(--dk-ink);border-radius:3cqw}
.dk-vs span{font:700 3cqw/1 var(--dk-mono);letter-spacing:.08em;text-transform:uppercase}
.dk-vs em{display:block;height:3.4cqw;border:.6cqw solid var(--dk-ink);border-radius:99px;overflow:hidden;font-style:normal}
.dk-vs em i{display:block;height:100%;width:0;background:var(--dk-ink)}
.dk-vs b{font:800 4.4cqw/1 var(--dk-display);white-space:nowrap}

/* a date where the coin chip would be in a ranked list */
.dk-rank .dt{font:700 3.5cqw/1.1 var(--dk-display);white-space:nowrap;min-width:0}

/* colored profit and loss inside tiles and rows (an em keeps the font of the number it sits in) */
.dk-back em.cg,.dk-back em.cb{font-style:normal}

/* a ranked list that sits a little closer together, so ten rows fit under a pair of tiles */
.dk-tight .dk-rank{padding:.55cqw 0}