/* The 2026 AI incident timeline: one column of dated entries under a sticky
   panel of running totals. The entries are plain markup and read top to bottom
   on their own; the panel and the dimming come from ts/src/aiincidents.ts, and
   nothing here is required for the post to be legible. Colours are the ones
   the interactive tools use, from custom.scss. */

.ait {
  --ait-border: color-mix(in srgb, var(--gray) 32%, transparent);
  --ait-muted: var(--gray);
  --ait-accent: var(--secondary);
  margin: 1.5rem 0 2.5rem;
}

/* The panel */

.ait-dash {
  position: sticky;
  top: var(--sticky-top);
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "when figure"
    "kind figure"
    "tallies tallies"
    "bar position";
  align-items: center;
  gap: 0.3rem 0.9rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ait-border);
  border-radius: 6px;
  background: var(--light);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--dark) 8%, transparent);
}

.ait-dash > p,
.ait-dash > dl {
  margin: 0;
}

.ait-dash-when {
  grid-area: when;
  align-self: end;
}

.ait-dash-date {
  font-weight: 600;
}

.ait-dash-year {
  margin-left: 0.35rem;
  color: var(--ait-muted);
  font-size: 0.8rem;
}

.ait-dash-kind {
  grid-area: kind;
  align-self: start;
  justify-self: start;
}

.ait-dash-figure {
  display: grid;
  grid-area: figure;
  justify-items: end;
  text-align: right;
}

.ait-dash-figure[hidden] {
  display: none;
}

.ait-figure-value {
  color: var(--ait-accent);
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.1;
}

.ait-figure-label {
  max-width: 9rem;
  color: var(--ait-muted);
  font-size: 0.7rem;
  line-height: 1.25;
}

.ait-tallies {
  grid-area: tallies;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.25rem 0.9rem;
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ait-border);
}

/* The number on top of its label. A `dd` may not precede its `dt` in the
   markup, so the column is reversed rather than the list. */
.ait-tally {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.05rem;
}

.ait-tally dt {
  color: var(--ait-muted);
  font-size: 0.66rem;
  line-height: 1.2;
}

.ait-tally dd {
  margin: 0;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.2;
}

.ait-progress {
  grid-area: bar;
  height: 3px;
  margin-top: 0.4rem;
  border-radius: 2px;
  background: var(--ait-border);
  overflow: hidden;
}

.ait-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ait-accent);
  transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.ait-position {
  grid-area: position;
  margin-top: 0.4rem;
  color: var(--ait-muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The entries */

.ait-track {
  --ait-inset: 1.6rem;
  --ait-rail: 0.35rem;
  --ait-dot: 0.55rem;
  position: relative;
  margin: 1.6rem 0 0;
  padding: 0 0 0 var(--ait-inset);
  list-style: none;
}

.ait-track::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  bottom: 0.6rem;
  left: var(--ait-rail);
  width: 1px;
  background: var(--ait-border);
}

.ait-entry {
  position: relative;
  padding-bottom: 2.25rem;
}

.ait-entry::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: calc(var(--ait-rail) - var(--ait-inset) - var(--ait-dot) / 2);
  width: var(--ait-dot);
  height: var(--ait-dot);
  border: 1px solid var(--ait-border);
  border-radius: 50%;
  background: var(--light);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.ait-entry h3 {
  margin: 0.1rem 0 0.35rem;
  font-size: 1.02rem;
  line-height: 1.3;
}

.ait-entry p {
  margin: 0 0 0.3rem;
}

.ait-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.ait-meta time {
  color: var(--ait-muted);
  font-variant-numeric: tabular-nums;
}

.ait-kind,
.ait-dash-kind {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--ait-border);
  border-radius: 999px;
  color: var(--ait-muted);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* When it happened, when somebody noticed, when it was published. The gap
   between the first and the last is appended by the page script, so it cannot
   drift from the two dates it is the distance between. */
.ait-entry .ait-when {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.5rem;
  margin: 0.45rem 0 0.35rem;
  color: var(--ait-muted);
  font-size: 0.72rem;
}

.ait-entry .ait-when > span + span::before {
  content: "\00b7";
  margin-right: 0.45rem;
  opacity: 0.6;
}

.ait-entry .ait-gap {
  color: var(--ait-accent);
  font-variant-numeric: tabular-nums;
}

.ait-source {
  font-size: 0.75rem;
}

.ait-source a {
  color: var(--ait-muted);
}

.ait-source a:hover {
  color: var(--ait-accent);
}

/* What the script drives. Before it runs, nothing is dimmed. */

.ait.is-live .ait-entry {
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.ait.is-live .ait-entry.is-active,
.ait.is-live .ait-entry.is-past {
  opacity: 1;
}

.ait.is-live .ait-entry.is-active::before {
  border-color: var(--ait-accent);
  background: var(--ait-accent);
  transform: scale(1.3);
}

.ait.is-live .ait-entry.is-past::before {
  border-color: color-mix(in srgb, var(--ait-accent) 50%, var(--ait-border));
  background: color-mix(in srgb, var(--ait-accent) 45%, var(--light));
}

/* A phone gives the panel a third of the screen if it is let. Tighter tiles,
   smaller type, and the track loses most of its indent. */
@media (max-width: 800px) {
  .ait-dash {
    gap: 0.25rem 0.6rem;
    padding: 0.55rem 0.7rem;
  }

  .ait-figure-value {
    font-size: 1.5rem;
  }

  .ait-figure-label {
    max-width: 7rem;
  }

  .ait-tallies {
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: 0.2rem 0.6rem;
    margin-top: 0.3rem;
    padding-top: 0.4rem;
  }

  .ait-tally dd {
    font-size: 0.9rem;
  }

  .ait-tally dt {
    font-size: 0.62rem;
  }

  .ait-track {
    --ait-inset: 1.1rem;
  }

  .ait-entry {
    padding-bottom: 1.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ait-progress-fill,
  .ait.is-live .ait-entry,
  .ait-entry::before {
    transition: none;
  }
}