/*
 * H1 record panel — the first "screen" on the site, and honest about being a
 * diagram rather than a photograph of software (Blueprint 05, H1).
 *
 * Motion #1, the only sequence on the whole site (Blueprint 09):
 *   TENSION  rows post top to bottom, each a hard appear with its 1 px rule
 *            drawing left → right in 120 ms, 150 ms apart
 *   IMPACT   the total row posts in Nexys green with a single hard tick, 0 ms
 *   RELEASE  the panel's foot rule draws across and the mono caption appears
 *
 * The Blueprint's RELEASE wiped the panel edge aside to reveal a real
 * sanitised Nexys screen. No such capture exists yet and none may be
 * fabricated, so the release resolves on the panel's own foot instead. When
 * captures land the wipe can be restored without touching the TENSION and
 * IMPACT stages.
 *
 * Every animation is written so that the *resting* state is the final frame:
 * the keyframes only apply while `prefers-reduced-motion: no-preference`, and
 * they use `both` fill so the hidden state exists solely during the delay.
 * If animation never runs, the complete panel is simply there.
 */

.panel {
  border: var(--hairline) solid var(--ink);
  background: var(--paper);
}

.head,
.row,
.total {
  display: grid;
  /* The module column sizes to its own header, which is wider than its
     two-digit values; a fixed width made "MODULI" collide with "VLERA". */
  grid-template-columns: 3.5ch minmax(0, 1fr) auto auto;
  gap: var(--s3) var(--s4);
  align-items: baseline;
  padding: var(--s3) var(--s4);
}

.head {
  background: var(--paper-2);
  border-bottom: var(--hairline) solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.row {
  position: relative;
  font-size: var(--step-small);
}

/* The hairline each row draws under itself as it posts. */
.row::after {
  content: "";
  position: absolute;
  inset-inline: var(--s4);
  bottom: 0;
  height: var(--hairline);
  background: var(--rule);
  transform-origin: left center;
}

.nr,
.mod {
  font-family: var(--font-mono);
  font-size: var(--step-mono);
  color: var(--muted);
}

.mod {
  text-align: right;
}

.doc {
  font-weight: 500;
  overflow-wrap: break-word;
}

.val {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.total {
  border-top: 2px solid var(--ink);
  font-size: var(--step-small);
  font-weight: 500;
}

.total .val {
  color: var(--green-ink);
}

.total .nr {
  color: var(--ink-2);
}

.tick {
  position: absolute;
  margin-left: calc(var(--s4) * -1);
  color: var(--green-ink);
}

.totalWrap {
  position: relative;
}

.foot {
  height: var(--hairline);
  background: var(--ink);
  transform-origin: left center;
}

.caption {
  margin: var(--s3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ---- Motion ------------------------------------------------------------- */

/*
 * The day posts when the reader reaches it. In V3 this panel sat in the
 * first screen and ran from page load; in V4 it is a chapter of its own, so
 * it is armed by the chapter entrance (components/SectionEntrance) and plays
 * when the chapter comes into view. The rows post top to bottom, each a hard
 * appear with its rule drawing in 120 ms; the total posts with its tick; the
 * foot rule draws across. Unarmed — no script, reduced motion, print — the
 * finished panel is simply there.
 */
@media (prefers-reduced-motion: no-preference) {
  [data-enter="out"] .row,
  [data-enter="out"] .total,
  [data-enter="out"] .tick,
  [data-enter="out"] .caption {
    visibility: hidden;
  }

  [data-enter="out"] .row::after,
  [data-enter="out"] .foot {
    transform: scaleX(0);
  }

  [data-enter="in"] .row {
    animation: appear 1ms linear calc(200ms + var(--i) * 150ms) both;
  }

  [data-enter="in"] .row::after {
    animation: draw 120ms var(--ease) calc(200ms + var(--i) * 150ms) both;
  }

  [data-enter="in"] .total,
  [data-enter="in"] .tick {
    animation: appear 1ms linear 950ms both;
  }

  [data-enter="in"] .foot {
    animation: draw 240ms var(--ease) 1000ms both;
  }

  [data-enter="in"] .caption {
    animation: appear 1ms linear 1240ms both;
  }

  @keyframes appear {
    from {
      visibility: hidden;
    }
    to {
      visibility: visible;
    }
  }

  @keyframes draw {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}

@media (max-width: 767px) {
  .head,
  .row,
  .total {
    grid-template-columns: 3ch minmax(0, 1fr) minmax(0, auto);
    column-gap: var(--s2);
  }

  /* The module code folds into the document cell on a phone. */
  .mod {
    display: none;
  }
}