/* Certant Flat — page-local rules for changelog.html. Tokens only, prefix .pg-cl. */

/* A dated stream is one column of prose; 56px between entries is closer than
   --section-gap without reading as a list. 848 = the old 820px measure plus the rail gutter. */
.pg-cl__stream { position: relative; max-width: 848px; padding-left: 28px; }
.pg-cl__entry + .pg-cl__entry { margin-top: var(--sp-8); }

/* The old page read as a log because a hairline ran down it with a ring at each release;
   flat.css has no timeline primitive, and a border on the entries would cut between them. */
.pg-cl__stream::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.pg-cl__entry { position: relative; }
.pg-cl__entry::before { content: ""; box-sizing: border-box; position: absolute; left: -28px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 2px solid var(--teal); }
/* One filled marker, for the release at the top; the rest are hollow. Not a hue change. */
.pg-cl__entry:first-child::before { background: var(--teal); }

/* Below 700px the gutter costs more measure than the spine is worth. */
@media (max-width: 700px) {
  .pg-cl__stream { padding-left: 0; }
  .pg-cl__stream::before, .pg-cl__entry::before { display: none; }
}

/* The old hero's live dot (pill-pulse, 2.4s) said the log is still moving. Flat has
   no indicator dots, so the chip's icon carries the same breath at the same timing. */
.pg-cl__live .icon { animation: pg-cl-live 2.4s ease-in-out infinite; }
@keyframes pg-cl-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* The homepage preview needs a headline smaller than h3 but heavier: it is a
   picture of type, not a real heading. */
.pg-cl__mock-h { font-size: 26px; font-weight: var(--fw-black); letter-spacing: var(--track-tight); line-height: 1.1; color: var(--fg-1); }
.pg-cl__mock-h em { font-style: normal; color: var(--teal); }

/* .btn--secondary is --bg-tint, the same colour as the tint--panel it sits on inside this
   mock, so the pill loses its outline entirely; paper it the way .flow-frame does. */
.pg-cl__mock .btn--secondary { background: var(--paper); }

/* Nothing in the system fits a three-part edge row: not a .table, not a .hue-row. */
.pg-cl__row { display: flex; align-items: center; gap: var(--sp-2); background: var(--bg-tint); border-radius: var(--r-control); padding: 8px 12px; font-size: var(--fs-sm); color: var(--fg-1); }
/* fg-2, not fg-3: the Ink-3-on-white rule means the lightest text only appears on white, never inside a tint block. */
.pg-cl__row .icon { color: var(--fg-2); }
.pg-cl__row b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--fg-2); font-weight: var(--fw-semibold); }

/* The graph's labels are fixed at 11px in the SVG; a pin narrower than its
   560px viewBox width would shrink them below legible on small screens. Drawn at
   560 x 280: shown at that size and centred, never stretched to the column
   (the exemplar's rule for the retrieval illustrations). */
.pg-cl__graph { --viz-pin: 560px; max-width: 560px; margin-inline: auto; }

/* The old figure's SMIL halo (r 14→28, opacity 0.45→0, 3.6s) on the selected entity.
   SVG has no system class for a ring that breathes; non-scaling-stroke keeps it hairline. */
.pg-cl__pulse { transform-box: fill-box; transform-origin: center; animation: pg-cl-pulse 3.6s var(--ease) infinite; }
@keyframes pg-cl-pulse { 0% { transform: scale(1); opacity: 0.45; } 60% { opacity: 0.2; } 100% { transform: scale(2); opacity: 0; } }

/* flat.css makes .viz-cite inline-flex, which in the Vietnamese pane leaves the chip
   hanging off the last text line; a static bubble has room to give it a row. */
.pg-cl__entry .viz-bubble--static .viz-cite { display: flex; width: fit-content; }

@media (prefers-reduced-motion: reduce) {
  .pg-cl__live .icon { animation: none; opacity: 1; }
  .pg-cl__pulse { animation: none; opacity: 0; }
}