/* SHAPE: Dated Log.
   A stamped header over grouped, disclosable entries in one narrow
   column, each carrying its own status. This is the one v1 shape the
   critique found was working, so it is refined rather than replaced.

   What changed: the disclosure no longer animates max-height. That rule
   produced 112 detector findings on mobile alone, and animating height
   thrashes layout. Only the marker moves now, on a transform. */

/* ---------- Header ---------- */
.now-head { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0 clamp(var(--sp-5), 4vw, var(--sp-6)); }
.now-stamp {
  font-family: var(--font-mono); font-size: var(--fs-small);
  color: var(--clay-deep); margin-bottom: var(--sp-4);
  letter-spacing: 0.01em;
}
.now-head h1 { font-size: var(--fs-hero); max-width: 16ch; }
.now-head .lead { margin-top: var(--sp-5); }

/* ---------- Log ---------- */
.log { border-top: 1px solid var(--line-strong); padding-bottom: var(--sp-8); }
.log-group { border-bottom: 1px solid var(--line); }

.log-group > summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: 600; color: var(--ink); letter-spacing: var(--tr-display);
}
.log-group > summary::-webkit-details-marker { display: none; }
.log-group > summary:hover { color: var(--field); }
.log-group > summary:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }

.lg-count {
  font-family: var(--font-mono); font-size: var(--fs-small);
  font-weight: 400; color: var(--faint);
}
.lg-mark {
  margin-left: auto; flex: none;
  width: 24px; height: 24px; position: relative;
  border: 1px solid var(--line-strong); border-radius: 50%;
}
.lg-mark::before, .lg-mark::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--field); transform: translate(-50%, -50%);
  transition: transform .2s var(--ease);
}
.lg-mark::before { width: 10px; height: 1.5px; }
.lg-mark::after  { width: 1.5px; height: 10px; }
.log-group[open] > summary .lg-mark { background: var(--field); border-color: var(--field); }
.log-group[open] > summary .lg-mark::before,
.log-group[open] > summary .lg-mark::after { background: var(--paper); }
.log-group[open] > summary .lg-mark::after { transform: translate(-50%, -50%) scaleY(0); }

.log-entries { padding-bottom: var(--sp-5); }
.entry {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4); align-items: start;
  padding: var(--sp-4) 0; border-top: 1px solid var(--line);
}
.entry:first-child { border-top: none; padding-top: 0; }
.entry p { color: var(--ink-soft); max-width: var(--measure); }
.entry .tag { white-space: nowrap; }

/* ---------- Close ---------- */
.now-close { padding: clamp(var(--sp-7), 6vw, var(--sp-8)) 0; margin-top: var(--sp-7); }
.now-close h2 { max-width: 20ch; }
.now-close p { margin: var(--sp-4) 0 var(--sp-6); max-width: 46ch; }

/* ---------- Responsive ---------- */
@media (max-width: 620px) {
  .entry { grid-template-columns: 1fr; gap: var(--sp-3); }
  .entry .tag { justify-self: start; }
}