/* ActivityTimeline component (`[lpos_timeline]`) -- token-driven glass HUD timeline. Mirrors the
   CardGrid/archive-card head+pager recipe (title-panel left, subpanel--cluster pager top-right).
   NO-SCROLLBAR LAW: the list is a fixed-page flex column (overflow:hidden on the body); rows
   beyond the current page carry the [hidden] attribute (assets/js/components/activity-timeline.js
   toggles it), never a scrollbar. 100% var(--lpos-*)-token-driven; every fallback matches that
   token's :where(:root) canon value in console-tokens.css. */

.lpos-c-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--lpos-gap, 12px);
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
  overflow: hidden;
}

/* ---- head row: title left, sample-badge + pager cluster right (same row height as archive-grid) ---- */
.lpos-c-timeline__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lpos-gap, 12px);
  min-height: var(--lpos-titlebar-h, 64px);
}
.lpos-c-timeline__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.lpos-c-timeline__title h2 {
  margin: 0;
  font: 700 var(--lpos-text-md, 17px)/1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lpos-c-timeline__head-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--lpos-gap, 12px);
}
.lpos-c-timeline__demo-badge {
  flex: 0 0 auto;
  font: 600 var(--lpos-text-2xs, 12px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  letter-spacing: var(--lpos-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--lpos-muted, #A8B2C7);
  padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-1, 30%), transparent);
  border-radius: var(--lpos-radius-sm, 4px);
  white-space: nowrap;
}
.lpos-c-timeline__pager { flex: 0 0 auto; align-self: center; }
.lpos-c-timeline__pageinfo {
  font: 600 var(--lpos-text-sm, 14px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  min-width: 3.5ch;
  text-align: center;
  padding: 0 var(--lpos-space-xs, 4px);
  white-space: nowrap;
}

/* ---- honest-empty ---- */
.lpos-c-timeline__empty {
  margin: 0;
  padding: var(--lpos-space-sm, 8px) var(--lpos-space-md, 12px);
  color: var(--lpos-muted, #A8B2C7);
  font: 400 var(--lpos-text-sm, 14px)/1.4 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
}

/* ---- body: fixed-page flex column, never scrolls ---- */
.lpos-c-timeline__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
}
.lpos-c-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lpos-space-xs, 4px);
  width: 100%;
}
.lpos-c-timeline__list [hidden] { display: none; }

/* ---- day divider row: label + hairline rule filling the rest of the row ---- */
.lpos-c-timeline__day {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--lpos-space-sm, 8px);
  padding: var(--lpos-space-xs, 4px) 0;
}
.lpos-c-timeline__day-label {
  margin: 0;
  flex: 0 0 auto;
  font: 700 var(--lpos-text-2xs, 12px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  letter-spacing: var(--lpos-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--lpos-muted, #A8B2C7);
}
.lpos-c-timeline__day::after {
  content: "";
  flex: 1 1 auto;
  height: var(--lpos-border-width, 1px);
  background: var(--lpos-glass-rule, rgba(255,255,255,0.10));
}

/* ---- event row: rail (spine + node) + content, sharing the remaining page height evenly ---- */
.lpos-c-timeline__item {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  gap: var(--lpos-space-sm, 8px);
  --lpos-timeline-accent: var(--lpos-accent, #00D4FF);
}
.lpos-c-timeline__rail {
  flex: 0 0 auto;
  width: var(--lpos-icon-size, 26px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lpos-c-timeline__rail::before,
.lpos-c-timeline__rail::after {
  content: "";
  position: absolute;
  left: 50%;
  width: var(--lpos-border-width, 1px);
  background: color-mix(in srgb, var(--lpos-border-tint,var(--lpos-accent)) var(--lpos-border-alpha-1, 30%), transparent);
  transform: translateX(-50%);
}
.lpos-c-timeline__rail::before { top: 0; bottom: 50%; }
.lpos-c-timeline__rail::after { top: 50%; bottom: 0; }
/* the first event under a day divider has no line above it; the last event before the next
   divider (or the very last row) has no line below it -- the spine breaks cleanly at day edges. */
.lpos-c-timeline__day + .lpos-c-timeline__item .lpos-c-timeline__rail::before { display: none; }
.lpos-c-timeline__item:last-child .lpos-c-timeline__rail::after { display: none; }
.lpos-c-timeline__item:has(+ .lpos-c-timeline__day) .lpos-c-timeline__rail::after { display: none; }

/* CHIP-IN-PANEL EXCEPTION (documented 2026-08-10, JD's law pass -- the same exception media.php
   has carried since 2026-08-04, written down here for the Component sheets that lacked it).
   The one-panel law bans a PANEL inside a panel. It does not ban a CHIP inside a panel: a small
   round or pill-shaped marker that carries its own background/border to read as a distinct token
   ON a surface -- avatars, timeline nodes, status pills, calendar day cells, sample badges, stat
   icons. These are Assets with a shape, not panels: they never take the panel radius, never take
   the panel blur, and never contain other content. A law audit will flag them as "bare chrome
   inside chrome"; that is expected and correct. If one of these ever grows the panel radius plus
   backdrop-filter, it has stopped being a chip and the law applies again. */
.lpos-c-timeline__node {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: var(--lpos-icon-size, 26px);
  height: var(--lpos-icon-size, 26px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lpos-panel, #0D111C);
  border: var(--lpos-border-width, 1px) solid var(--lpos-timeline-accent);
}
.lpos-c-timeline__node svg {
  width: var(--lpos-icon-size-xs, 20px);
  height: var(--lpos-icon-size-xs, 20px);
  color: var(--lpos-timeline-accent);
  fill: none;
  stroke: currentColor;
}

.lpos-c-timeline__content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--lpos-space-xs, 4px);
}
.lpos-c-timeline__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: var(--lpos-space-sm, 8px);
  min-width: 0;
}
.lpos-c-timeline__time {
  flex: 0 0 auto;
  font: 700 var(--lpos-text-xs, 13px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-timeline-accent);
  white-space: nowrap;
}
.lpos-c-timeline__actor {
  flex: 0 1 auto;
  min-width: 0;
  font: 600 var(--lpos-text-sm, 14px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lpos-c-timeline__summary {
  margin: 0;
  min-height: 0;
  font: 400 var(--lpos-text-sm, 14px)/1.4 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-muted, #A8B2C7);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* very short panels: clamp the summary to one line instead of two so more rows keep fitting. */
@media (max-height: 480px) {
  .lpos-c-timeline__summary { -webkit-line-clamp: 1; }
}