/* ==========================================================================
   Self (features/self): habits, promises, the check-in, weight and the week.
   Nothing here is ever red or overdue; see docs/DESIGN.md for the colour jobs.
   ========================================================================== */

/* Today's habits as rings */
.self-today { display: flex; flex-direction: column; gap: var(--s3); }
.self-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.self-head .eyebrow { margin: 0; }
.self-head .sec-link { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; }
.ring-row { display: flex; gap: var(--s2); overflow-x: auto; margin: 0 calc(var(--s4) * -1); padding: 2px var(--s4) 6px; scrollbar-width: none; }
.ring-row::-webkit-scrollbar { display: none; }
.ring {
  flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--s3) 6px; border: none; border-radius: var(--r-md); background: var(--surface-2);
  color: var(--text); text-decoration: none; text-align: center; font: inherit; cursor: pointer; transition: transform 0.12s;
}
.ring:active { transform: scale(0.95); }
.ring-art {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--surface); color: color-mix(in srgb, var(--job-new) 80%, var(--text));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--job-new) 35%, transparent);
}
.ring-name { font-size: 12px; font-weight: 700; line-height: 1.2; }
.ring-note { font-size: 11px; line-height: 1.2; color: var(--muted); }
.ring.is-done { background: color-mix(in srgb, var(--job-calm) 12%, var(--surface)); }
.ring.is-done .ring-art { background: var(--job-calm); color: #fff; box-shadow: none; }
.self-note { padding: 0 2px; }

/* Promises */
.self-promise { display: flex; flex-direction: column; gap: var(--s2); text-decoration: none; color: var(--text); }
.self-promise.is-empty { flex-direction: row; align-items: center; gap: var(--s3); }
.self-promise .chevron { color: var(--muted); }
.promise-row { display: flex; align-items: center; gap: var(--s3); }
.promise-row .bar { margin-top: 5px; }

/* The daily check-in */
.checkin-line {
  display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3);
  border: none; border-radius: var(--r-md); background: color-mix(in srgb, var(--job-new) 8%, var(--surface));
  box-shadow: var(--shadow-1); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: transform 0.12s;
}
.checkin-line:active { transform: scale(0.985); }
.checkin-line.is-done { background: var(--surface); }
.checkin-line .chevron { color: var(--muted); }
.mood-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mood { position: relative; display: block; min-width: 0; }
.mood input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.mood-face {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: var(--s2) 2px;
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); cursor: pointer;
}
.mood-face b { font-size: 11px; font-weight: 700; }
.mood input:checked + .mood-face {
  background: color-mix(in srgb, var(--tone) 16%, var(--surface));
  color: color-mix(in srgb, var(--tone) 80%, var(--text));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tone) 45%, transparent);
}
.mood input:focus-visible + .mood-face { outline: 2px solid var(--job-new); outline-offset: 2px; }

/* One habit */
.habit-row .habit-link { text-decoration: none; color: var(--text); }
.habit-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); text-align: center; }
.habit-stats .stat { display: flex; flex-direction: column; gap: 2px; }
.habit-stats b { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--job-new) 70%, var(--text)); }
.hdot-grid { display: flex; flex-direction: column; gap: 5px; }
.hdot-labels, .hdot-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.hdot-labels span { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; }
.hdot { height: 18px; border-radius: 6px; background: var(--surface-2); }
.hdot.is-on { background: var(--job-new); }
.hdot.is-today { box-shadow: 0 0 0 2px color-mix(in srgb, var(--job-new) 45%, transparent); }
.hdot.is-later { opacity: 0.35; }
.habit-legend { margin-top: var(--s2); }

/* Weight: a line, no goal on it */
.weight-card { display: flex; flex-direction: column; gap: var(--s3); }
.weight-now { display: flex; align-items: baseline; gap: 6px; }
.weight-now b { font-size: 36px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.weight-chart { width: 100%; height: auto; overflow: visible; }
.w-line { stroke: var(--job-sky); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.w-dot { fill: color-mix(in srgb, var(--job-sky) 45%, var(--surface)); }
.w-tick { font-size: 9px; font-weight: 700; fill: var(--muted); }

/* The week, looked back on */
.week-line { background: color-mix(in srgb, var(--job-sky) 10%, var(--surface)); }
.week-line .wins-tick { background: var(--job-sky); }
.week-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.week-nav .btn-ghost { opacity: 0.4; }
.week-top { display: flex; flex-direction: column; gap: var(--s4); }
.week-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week-bar { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.week-bar-n { height: 14px; font-size: 11px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.week-bar-track { width: 100%; height: 64px; display: flex; align-items: flex-end; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.week-bar-fill { width: 100%; border-radius: 8px; background: var(--job-calm); }
.week-bar.is-today .week-bar-track { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--job-new) 45%, transparent); }
.week-bar-d { font-size: 11px; font-weight: 700; color: var(--muted); }
.week-bar-m { height: 16px; color: color-mix(in srgb, var(--tone, var(--muted)) 80%, var(--text)); }
.week-hdots { display: flex; flex: none; gap: 3px; }
.week-hdots .hdot { width: 10px; height: 10px; border-radius: 3px; }
.week-close { display: flex; flex-direction: column; gap: var(--s3); }
.week-close p { font-size: 17px; line-height: 1.4; text-wrap: balance; }

@media (min-width: 720px) {
  .ring-row { margin: 0; padding: 2px 0 6px; flex-wrap: wrap; overflow: visible; }
  .week-bar-track { height: 90px; }
}