#dia { background: var(--paper); }

/* Timeline arc */
.day-arc {
  position: relative; height: 3px; background: var(--line);
  border-radius: 99px; margin-bottom: 64px;
}
.day-arc-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--c-n), var(--hot));
  width: 0%; transition: width 1.8s cubic-bezier(.2,.8,.2,1);
}
.day-arc.in .day-arc-fill { width: 84%; }

.day-ticks {
  position: absolute; top: -8px; left: 0; right: 0;
  display: flex; justify-content: space-between;
}
.dtick {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line);
  position: relative;
}
.dtick.done { background: var(--ink); border-color: var(--ink); }
.dtick.now  {
  background: var(--hot); border-color: var(--hot);
  box-shadow: 0 0 0 4px rgba(255,77,46,.2);
}
.dtick-lbl {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .1em; color: var(--ink-3); white-space: nowrap;
}

/* Day cards */
.day-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 14px;
}
.dm {
  background: #fff; border: 1px solid var(--line);
  border-radius: 22px; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.dm.in    { opacity: 1; transform: none; }
.dm.alert { border-color: var(--hot); background: rgba(255,77,46,.025); }

.dm-time {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .12em; color: var(--ink-3);
  display: flex; align-items: center; gap: 7px;
}
.dm-ico { width: 22px; height: 22px; flex-shrink: 0; }

.dm-h {
  font-family: 'Fraunces', serif; font-style: italic;
  font-size: 19px; font-weight: 400;
  letter-spacing: -.01em; line-height: 1.1;
}
.dm-p { font-size: 13px; color: var(--ink-2); line-height: 1.55; }

.dm-tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--ink); color: #fff; width: fit-content;
}
.dm-tag.red { background: var(--hot); }

@media(max-width:900px) { .day-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:540px) {
  .day-grid { grid-template-columns: 1fr; gap: 10px; }
  .day-arc { margin-bottom: 56px; }
  .dtick { width: 14px; height: 14px; }
  .dtick-lbl { font-size: 8px; top: 20px; letter-spacing: .04em; }
  .dm { padding: 20px 18px; border-radius: 18px; }
  .dm-h { font-size: 18px; }
}