/* Habits view. Series colours come from --jn-s0…--jn-s6. No red or orange hues. */

.habit-view {
  max-width: 100%;
  min-width: 0;
  color: var(--dx-text);
}

.habit-view .habit-fold.fold {
  display: block;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 var(--jn-gap, 8px);
  padding: 0;
  box-sizing: border-box;
}

.habit-view .habit-fold h3.fold-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.habit-view .habit-fold .fold-summary {
  overflow: hidden;
  line-height: 1.35;
}

.habit-view .fold-emoji {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
}

.habit-view .fold-summary .fold-line {
  flex: 1 1 auto;
  min-width: 0;
}

.habit-view .habit-body {
  min-width: 0;
  max-width: 100%;
}

.habit-view button:focus-visible,
.habit-view a:focus-visible,
.habit-view .heat-scroll:focus-visible {
  outline: 2px solid var(--dx-accent);
  outline-offset: 2px;
}

.habit-view .habit-note,
.habit-view .heat-detail,
.habit-view .trend-tip {
  margin: 6px 0;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--dx-text);
}

.habit-view .jn-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  margin-left: auto;
}

.habit-view .jn-dot {
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--jn-dot-off, #64748b);
}

.habit-view .jn-dot.on {
  background: var(--jn-dot-on, #1d4ed8);
  box-shadow: none;
}

.habit-view .rate-bar {
  display: block;
  height: 8px;
  width: 100%;
  max-width: 100%;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--dx-card-solid);
  box-shadow: inset 0 0 0 1px var(--dx-border);
  overflow: hidden;
}

.habit-view .rate-bar i {
  display: block;
  height: 100%;
  width: var(--v, 0%);
  background: var(--dx-accent);
}

.habit-view .habit-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.habit-view .streak-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  min-height: var(--jn-tap, 32px);
}

.habit-view .habit-open {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: var(--jn-tap, 32px);
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--dx-border);
  border-radius: var(--jn-radius, 12px);
  background: var(--dx-card-solid);
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.habit-view .streak-row.on .habit-open {
  box-shadow: inset 0 0 0 2px var(--dx-accent);
}

.habit-view .habit-emoji {
  flex: 0 0 auto;
  font-size: 1rem;
  line-height: 1;
}

.habit-view .streak-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.habit-view .today-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.habit-view .today-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-height: var(--jn-tap, 32px);
  border-bottom: 1px solid var(--dx-border);
}

.habit-view .today-item:last-child { border-bottom: 0; }

.habit-view .today-name {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
}

.habit-view .today-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  padding: 0 8px;
  border-radius: 999px;
  border: 2px solid var(--jn-miss, #334155);
  background: var(--dx-card-solid);
  color: var(--jn-miss, #334155);
  font-size: 0.8rem;
  font-weight: 700;
}

.habit-view .today-pill.is-done {
  background: var(--dx-accent, #1d4ed8);
  color: var(--dx-accent-fg, #ffffff);
  border-color: transparent;
}

.habit-view .today-pill.is-miss {
  background: var(--dx-card-solid);
  color: var(--jn-miss, #334155);
  border-style: solid;
  border-color: var(--jn-miss, #334155);
}

.habit-view .today-pill.is-unknown,
.habit-view .today-pill.is-none {
  background: transparent;
  color: var(--jn-unknown, #334155);
  border-style: dashed;
  border-color: var(--jn-unknown, #64748b);
}

.habit-view .habit-health {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: var(--jn-tap, 32px);
  min-height: var(--jn-tap, 32px);
  box-sizing: border-box;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--dx-accent);
  font-weight: 700;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
  text-decoration: underline;
}

.habit-view .habit-chips,
.habit-view .trend-stops,
.habit-view .heat-scroll {
  width: 0;
  min-width: 100%;
  max-width: 100%;
  min-height: var(--jn-tap, 32px);
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
}

.habit-view .habit-chips,
.habit-view .trend-stops {
  display: flex;
  gap: 6px;
  padding-bottom: 4px;
}

.habit-view .habit-chip,
.habit-view .trend-stop,
.habit-view .rate-row {
  flex: 0 0 auto;
  min-width: var(--jn-tap, 32px);
  min-height: var(--jn-tap, 32px);
  box-sizing: border-box;
  border: 1px solid var(--dx-border);
  border-radius: 12px;
  background: var(--dx-card-solid);
  color: var(--dx-text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.habit-view .habit-chip { padding: 4px 10px; border-radius: 999px; }

.habit-view .habit-chip.on,
.habit-view .rate-row.on,
.habit-view .trend-stop[tabindex="0"] {
  background: var(--dx-accent);
  color: var(--dx-accent-fg);
  border-color: transparent;
  font-weight: 700;
}

.habit-view .trend-stop {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2px 8px;
}

.habit-view .heat-scroll { padding-bottom: 6px; }

.habit-view .heat-months,
.habit-view .heat-cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 32px;
  gap: 4px;
  width: max-content;
}

.habit-view .heat-months { margin: 0 0 4px 36px; height: 16px; }

.habit-view .heat-month {
  font-size: 0.7rem;
  line-height: 16px;
  color: var(--dx-text);
  white-space: nowrap;
}

.habit-view .heat-body {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  width: max-content;
}

.habit-view .heat-dow {
  display: grid;
  grid-template-rows: repeat(7, 32px);
  gap: 4px;
  width: 32px;
  flex: none;
  font-size: 0.68rem;
  line-height: 32px;
  color: var(--dx-text);
}

.habit-view .heat-col {
  display: grid;
  grid-template-rows: repeat(7, 32px);
  gap: 4px;
}

.habit-view .hcell {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  box-sizing: border-box;
  background: var(--dx-card-solid);
  color: var(--dx-text);
  font: 700 14px/1 var(--dx-font, sans-serif);
}

.habit-view button.hcell { cursor: pointer; }

.habit-view .hcell.sample {
  width: 16px;
  height: 16px;
  font-size: 11px;
}

.habit-view .hcell.none,
.habit-view .hcell.future {
  background: var(--dx-card-solid);
  box-shadow: inset 0 0 0 1px var(--dx-text);
}

.habit-view .hcell.unknown {
  background: repeating-linear-gradient(-45deg, var(--dx-card-solid), var(--dx-card-solid) 5px, var(--dx-text) 5px, var(--dx-text) 8px);
  box-shadow: inset 0 0 0 1px var(--dx-text);
  color: transparent;
}

.habit-view .hcell.miss {
  background: var(--dx-card-solid);
  color: var(--jn-miss, #334155);
  box-shadow: inset 0 0 0 2px var(--jn-miss, #334155);
}

.habit-view .hcell.done {
  background: #166534;
  color: #ffffff;
}

.habit-view .hcell.lv0 { background: #f8fafc; color: #1e3a8a; box-shadow: inset 0 0 0 1px #1e3a8a; }
.habit-view .hcell.lv1 { background: #dbeafe; color: #1e3a8a; }
.habit-view .hcell.lv2 { background: #93c5fd; color: #0d0b08; }
.habit-view .hcell.lv3 { background: #3b82f6; color: #ffffff; }
.habit-view .hcell.lv4 { background: #1d4ed8; color: #ffffff; }
.habit-view .hcell.lv5 { background: #1e3a8a; color: #ffffff; }

.habit-view .hcell.mixed {
  background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--dx-text) 6px, var(--dx-text) 8px);
}

.habit-view .hcell.today { outline: 2px solid var(--dx-text); outline-offset: -2px; }

.habit-view .heat-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--dx-text);
}

.habit-view .legend-item { display: inline-flex; align-items: center; gap: 4px; }

.habit-view .trend-svg { display: block; width: 100%; height: auto; max-width: 100%; }

.habit-view .trend-grid { stroke: var(--dx-text); stroke-width: 1; opacity: 1; }
.habit-view .trend-axis { fill: var(--dx-text); font-size: 11px; text-anchor: end; }
.habit-view .trend-cursor { fill: var(--dx-accent-soft, transparent); }

.habit-view .trend-overall { fill: none; stroke: var(--dx-accent); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.habit-view .trend-overall.is-dim { stroke-dasharray: 2 3; stroke-width: 2.4; }
.habit-view .trend-habit { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.habit-view .trend-habit.is-on { stroke-width: 3; stroke-dasharray: none; }
.habit-view .trend-habit.is-dim { stroke-dasharray: 2 3; }
.habit-view .trend-habit.is-quiet.s0 { stroke-dasharray: 7 3; }
.habit-view .trend-habit.is-quiet.s1 { stroke-dasharray: 2 2; }
.habit-view .trend-habit.is-quiet.s2 { stroke-dasharray: 9 3 2 3; }
.habit-view .trend-habit.is-quiet.s3 { stroke-dasharray: 4 2; }
.habit-view .trend-habit.is-quiet.s4 { stroke-dasharray: 1 0; }
.habit-view .trend-habit.is-quiet.s5 { stroke-dasharray: 6 2 2 2; }
.habit-view .trend-habit.is-quiet.s6 { stroke-dasharray: 3 3; }

.habit-view .trend-habit.s0 { stroke: var(--jn-s0, #1d4ed8); }
.habit-view .trend-habit.s1 { stroke: var(--jn-s1, #0f766e); }
.habit-view .trend-habit.s2 { stroke: var(--jn-s2, #6d28d9); }
.habit-view .trend-habit.s3 { stroke: var(--jn-s3, #a16207); }
.habit-view .trend-habit.s4 { stroke: var(--jn-s4, #334155); }
.habit-view .trend-habit.s5 { stroke: var(--jn-s5, #0369a1); }
.habit-view .trend-habit.s6 { stroke: var(--jn-s6, #4d7c0f); }

.habit-view .trend-dot.s0,
.habit-view .rate-swatch.s0,
.habit-view .rate-bar.s0 i { fill: var(--jn-s0, #1d4ed8); background: var(--jn-s0, #1d4ed8); }
.habit-view .trend-dot.s1,
.habit-view .rate-swatch.s1,
.habit-view .rate-bar.s1 i { fill: var(--jn-s1, #0f766e); background: var(--jn-s1, #0f766e); }
.habit-view .trend-dot.s2,
.habit-view .rate-swatch.s2,
.habit-view .rate-bar.s2 i { fill: var(--jn-s2, #6d28d9); background: var(--jn-s2, #6d28d9); }
.habit-view .trend-dot.s3,
.habit-view .rate-swatch.s3,
.habit-view .rate-bar.s3 i { fill: var(--jn-s3, #a16207); background: var(--jn-s3, #a16207); }
.habit-view .trend-dot.s4,
.habit-view .rate-swatch.s4,
.habit-view .rate-bar.s4 i { fill: var(--jn-s4, #334155); background: var(--jn-s4, #334155); }
.habit-view .trend-dot.s5,
.habit-view .rate-swatch.s5,
.habit-view .rate-bar.s5 i { fill: var(--jn-s5, #0369a1); background: var(--jn-s5, #0369a1); }
.habit-view .trend-dot.s6,
.habit-view .rate-swatch.s6,
.habit-view .rate-bar.s6 i { fill: var(--jn-s6, #4d7c0f); background: var(--jn-s6, #4d7c0f); }
.habit-view .trend-dot.overall,
.habit-view .rate-swatch.overall { fill: var(--dx-accent); background: var(--dx-accent); }

html.dark .habit-view .trend-habit.s0 { stroke: var(--jn-s0, #93c5fd); }
html.dark .habit-view .trend-habit.s1 { stroke: var(--jn-s1, #5eead4); }
html.dark .habit-view .trend-habit.s2 { stroke: var(--jn-s2, #d8b4fe); }
html.dark .habit-view .trend-habit.s3 { stroke: var(--jn-s3, #fcd34d); }
html.dark .habit-view .trend-habit.s4 { stroke: var(--jn-s4, #cbd5e1); }
html.dark .habit-view .trend-habit.s5 { stroke: var(--jn-s5, #7dd3fc); }
html.dark .habit-view .trend-habit.s6 { stroke: var(--jn-s6, #bef264); }
html.dark .habit-view .trend-dot.s0,
html.dark .habit-view .rate-swatch.s0,
html.dark .habit-view .rate-bar.s0 i { fill: var(--jn-s0, #93c5fd); background: var(--jn-s0, #93c5fd); }
html.dark .habit-view .trend-dot.s1,
html.dark .habit-view .rate-swatch.s1,
html.dark .habit-view .rate-bar.s1 i { fill: var(--jn-s1, #5eead4); background: var(--jn-s1, #5eead4); }
html.dark .habit-view .trend-dot.s2,
html.dark .habit-view .rate-swatch.s2,
html.dark .habit-view .rate-bar.s2 i { fill: var(--jn-s2, #d8b4fe); background: var(--jn-s2, #d8b4fe); }
html.dark .habit-view .trend-dot.s3,
html.dark .habit-view .rate-swatch.s3,
html.dark .habit-view .rate-bar.s3 i { fill: var(--jn-s3, #fcd34d); background: var(--jn-s3, #fcd34d); }
html.dark .habit-view .trend-dot.s4,
html.dark .habit-view .rate-swatch.s4,
html.dark .habit-view .rate-bar.s4 i { fill: var(--jn-s4, #cbd5e1); background: var(--jn-s4, #cbd5e1); }
html.dark .habit-view .trend-dot.s5,
html.dark .habit-view .rate-swatch.s5,
html.dark .habit-view .rate-bar.s5 i { fill: var(--jn-s5, #7dd3fc); background: var(--jn-s5, #7dd3fc); }
html.dark .habit-view .trend-dot.s6,
html.dark .habit-view .rate-swatch.s6,
html.dark .habit-view .rate-bar.s6 i { fill: var(--jn-s6, #bef264); background: var(--jn-s6, #bef264); }
html.dark .habit-view .hcell.done { background: #4ade80; color: #052e16; }
html.dark .habit-view .hcell.miss,
html.dark .habit-view .today-pill.is-miss {
  color: var(--jn-miss, #cbd5e1);
  border-color: var(--jn-miss, #cbd5e1);
}
html.dark .habit-view .hcell.miss { box-shadow: inset 0 0 0 2px var(--jn-miss, #cbd5e1); }
html.dark .habit-view .today-pill.is-unknown,
html.dark .habit-view .today-pill.is-none {
  color: var(--jn-unknown, #cbd5e1);
  border-color: var(--jn-unknown, #94a3b8);
}
html.dark .habit-view .hcell.lv0,
html.dark .habit-view .hcell.lv1,
html.dark .habit-view .hcell.lv2 { color: #0d0b08; }
html.dark .habit-view .jn-dot { box-shadow: inset 0 0 0 1.5px var(--jn-dot-off, #94a3b8); }
html.dark .habit-view .jn-dot.on { background: var(--jn-dot-on, #93c5fd); box-shadow: none; }

.habit-view .trend-head { margin: 4px 0 6px; overflow-wrap: anywhere; font-size: 0.95rem; }
.habit-view .trend-head b { font-size: 1.05rem; font-weight: 700; }

.habit-view .trend-x {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 2px;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--dx-text);
}

.habit-view .trend-x span { text-align: center; min-width: 0; overflow-wrap: anywhere; }

.habit-view .rate-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; min-width: 0; }

.habit-view .rate-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  grid-template-areas: "swatch name num" "swatch bar bar";
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  text-align: left;
}

.habit-view .rate-swatch { grid-area: swatch; width: 12px; height: 12px; border-radius: 999px; }
.habit-view .rate-name { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
.habit-view .rate-num { grid-area: num; font-weight: 700; }
.habit-view .rate-row .rate-bar { grid-area: bar; margin-top: 0; }
.habit-view .rate-row.on .rate-name,
.habit-view .rate-row.on .rate-num,
.habit-view .habit-chip.on { color: var(--dx-accent-fg); }

@media (prefers-reduced-motion: reduce) {
  .habit-view *,
  .habit-view *::before,
  .habit-view *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}