/* A day in his life: compact timeline. Shared layout for all stops.
   Each stop's own styles live in site/habits/<stop>.css and are scoped under #stop-<stop>. */

.section--day { background: var(--bg); }
.container--day { --container: 62rem; }

.day { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(2.25rem, 5vw, 3.75rem); }
/* the day's timeline */
.day::before { content: ""; position: absolute; left: 1.55rem; top: 0.5rem; bottom: 0.5rem; border-left: 3px dashed var(--c-ink); opacity: 0.55; }

.stop { position: relative; padding-left: 4.4rem; }
.stop__time {
  position: absolute; left: 0; top: 0.9rem; z-index: 2;
  font-family: var(--font-display); font-size: 0.82rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  background: var(--c-ink); color: var(--c-paper); padding: 0.3em 0.55em; border-radius: var(--r-s);
  transform: rotate(-4deg);
}
.stop::after { /* knot on the line */
  content: ""; position: absolute; left: 1.2rem; top: 0.45rem; width: 0.8rem; height: 0.8rem; z-index: 1;
  border-radius: 50%; background: var(--accent); border: 3px solid var(--c-ink);
}

.stop__card {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--s-6); align-items: center;
  padding: var(--s-5); background: var(--surface); border: var(--border); border-radius: var(--r-l);
  box-shadow: 6px 6px 0 var(--accent); position: relative; overflow: hidden;
}
.stop:nth-child(even) .stop__card { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
.stop:nth-child(even) .stop__art { order: 2; }

/* the art box: small, consistent, figure sits on the bottom edge */
.stop__art {
  position: relative; height: clamp(15rem, 24vw, 17.5rem); display: grid; place-items: end center; overflow: hidden;
  background: var(--accent-soft); border: var(--border); border-radius: var(--r-m);
  isolation: isolate;
}
.stop__art::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.18; background: radial-gradient(var(--c-ink) 1.2px, transparent 1.6px) 0 0 / 9px 9px; }
.stop__art img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; object-position: center bottom; user-select: none; -webkit-user-drag: none; }
.hb-bust { translate: 0 4%; } /* busts end slightly above their bottom edge; sink them so the jacket meets the frame */

.stop__body { display: grid; gap: var(--s-3); align-content: center; min-width: 0; }
.stop__body h3 { font-size: var(--step-2); }
.stop__text { color: var(--text-muted); max-width: 32rem; }
.stop__controls { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.stop__controls:empty { display: none; }
.stop__readout { min-height: 1.5em; font-weight: 700; font-size: var(--step--1); color: var(--accent-ink); }
.stop__readout:empty { display: none; }

.stop--finale .stop__card { background: var(--c-burgundy); color: var(--c-paper); box-shadow: 6px 6px 0 var(--c-gold); }
.stop--finale .stop__text { color: #f0dfd8; }
.stop--finale .stop__readout { color: var(--c-gold); }
.stop--finale .stop__art { height: clamp(17rem, 30vw, 22rem); }
.stop--finale .stop__body h3 em::after { background: var(--c-burgundy-deep); }

/* chips (small selectable buttons) shared by the stops */
.chip {
  min-height: 2.75rem; padding: 0.4em 1.05em; font: inherit; font-weight: 900; cursor: pointer; background: var(--c-white); color: var(--c-ink);
  border: var(--border); border-radius: var(--r-pill); box-shadow: 3px 3px 0 var(--c-ink);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.chip:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--c-ink); }
.chip[aria-pressed="true"] { background: var(--c-ink); color: var(--c-paper); }
@media (hover: hover) { .chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--c-ink); } }

/* meter shared by the stops */
.hb-meter { width: min(100%, 16rem); height: 1rem; border: 2px solid var(--c-ink); border-radius: var(--r-pill); background: var(--c-paper-deep); overflow: hidden; }
.hb-meter > span { display: block; height: 100%; width: 0; background: var(--accent); border-right: 2px solid var(--c-ink); transition: width 0.5s var(--ease); }

/* 2x2 sprite sheets (transparent PNG sheets, row-major cells) */
.hb-sprite { position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: 200% 200%; background-position: 0 0; animation: hb-sheet var(--ms, 0.5s) steps(1) infinite; }
.hb-sprite--once { animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes hb-sheet { 0% { background-position: 0 0; } 25% { background-position: 100% 0; } 50% { background-position: 0 100%; } 75% { background-position: 100% 100%; } 100% { background-position: 100% 100%; } }
.hb-sprite--loop { animation-name: hb-sheet-loop; }
@keyframes hb-sheet-loop { 0% { background-position: 0 0; } 25% { background-position: 100% 0; } 50% { background-position: 0 100%; } 75% { background-position: 100% 100%; } }

/* tea stop: steam drifts up */
#stop-tea .stop__art { background: var(--accent-soft); }
#stop-tea .steam { position: absolute; left: 50%; bottom: 36%; width: 3.2rem; height: 5rem; pointer-events: none; opacity: 0; }

@media (max-width: 52rem) {
  /* phones: cards use the same gutters as every other section; the time sits on the card's top edge like a tab */
  .day::before { left: 2.6rem; top: 1rem; }
  .stop { padding: 1rem 0 0; }
  .stop::after { display: none; }
  .stop__time { left: 1rem; top: 0; font-size: 0.74rem; }
  .stop__card, .stop:nth-child(even) .stop__card { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6) var(--s-4) var(--s-4); }
  .stop:nth-child(even) .stop__art { order: 0; }
  .stop__art { height: clamp(14rem, 62vw, 17rem); }
  .stop--finale .stop__art { height: clamp(15rem, 70vw, 19rem); }
}

@media (prefers-reduced-motion: reduce) { .hb-sprite { animation: none !important; } }