/* ══════════════════════════════════════════════════════════════
   Keln — the day line (dayline.js).

   The foot of every top bar: a hairline that is today. The day so far
   is lit, fading in from the morning toward a small light that is
   now; each session is a short raised mark as long as it lasts. It is
   the bar's only edge, so it replaces the border, and it is drawn to
   be glanced at, not read: nothing on it moves faster than a minute.
   ══════════════════════════════════════════════════════════════ */

.dayline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(var(--hl), .09);
  pointer-events: none;
  z-index: 1;
}

.dayline__past {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--tint-a2, 34, 211, 166), .08), rgba(var(--tint-a2, 34, 211, 166), .75));
}

.dayline__now {
  position: absolute;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent2);
  box-shadow: 0 0 0 3px rgba(var(--tint-a2, 34, 211, 166), .12), 0 0 12px rgba(var(--tint-a2, 34, 211, 166), .7);
  animation: dayline-breathe 6s ease-in-out infinite;
}
@keyframes dayline-breathe {
  50% { box-shadow: 0 0 0 5px rgba(var(--tint-a2, 34, 211, 166), .05), 0 0 18px rgba(var(--tint-a2, 34, 211, 166), .85); }
}

/* A session: raised off the line, as long as it lasts. */
.dayline__s {
  position: absolute;
  top: -1px;
  height: 3px;
  min-width: 4px;
  border-radius: var(--r-pill);
  background: rgba(var(--hl), .42);
  pointer-events: auto;
}
/* Easier to find with a pointer than its three pixels. */
.dayline__s::before { content: ''; position: absolute; left: -4px; right: -4px; top: -12px; bottom: -4px; }
.dayline__s.is-done { background: rgba(var(--tint-a2, 34, 211, 166), .5); }
.dayline__s.is-now { background: var(--accent2); box-shadow: 0 0 10px rgba(var(--tint-a2, 34, 211, 166), .6); }
.dayline__s.is-missed { background: rgba(var(--hl), .16); }

.dayline__tip {
  position: absolute;
  bottom: 12px;
  left: 50%;
  padding: var(--s-1) var(--s-4);
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--hl), .12);
  background: rgba(var(--ground, 10, 14, 20), .95);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.dayline__s:hover .dayline__tip { opacity: 1; transform: translate(-50%, 0); }
/* Near either end the label keeps to the bar. */
.dayline__s.is-first .dayline__tip { left: 0; transform: translate(0, 4px); }
.dayline__s.is-first:hover .dayline__tip { transform: none; }
.dayline__s.is-last .dayline__tip { left: auto; right: 0; transform: translate(0, 4px); }
.dayline__s.is-last:hover .dayline__tip { transform: none; }

/* ── Next session, beside the account button ─────────────────── */
.tb-next {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-family: var(--font);
  font-size: var(--t-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.tb-next[hidden] { display: none; }
.tb-next:hover { color: var(--ink); background: rgba(var(--hl), .05); }
.tb-next:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.tb-next__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--hl), .45); }
.tb-next.is-now .tb-next__dot { background: var(--accent2); box-shadow: 0 0 8px rgba(var(--tint-a2, 34, 211, 166), .8); }
.tb-next__k { color: var(--dim); }
.tb-next__who { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 600; }
.tb-next__t { font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .tb-next { padding: 0 var(--s-3); }
  .tb-next__k { display: none; }
  .tb-next__who { max-width: 9ch; }
}

@media (prefers-reduced-motion: reduce) {
  .dayline__now { animation: none; }
  .dayline__tip, .tb-next { transition: none; }
}