/* Time machine: independently scrollable event and detail surfaces. */
dialog#timeline {
  --tone: var(--hud-cyan, #69d9ff);
  position: fixed;
  inset: auto auto 64px 34px;
  width: min(880px, calc(100vw - 420px));
  height: min(460px, calc(100vh - 220px));
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  transform: none;
  z-index: 35;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--hp-reading, #0c1b26);
  color: var(--hp-muted, #a1c2d1);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .04em;
  color-scheme: dark;
  overflow: auto;
  overscroll-behavior: contain;
}
#timeline[open] { display: flex; flex-direction: column; }
body.immersive dialog#timeline[open] { display: flex !important; }
#timeline, #timeline * { box-sizing: border-box; }
#timeline * { border-radius: 0; box-shadow: none; }
#timeline [hidden] { display: none !important; }
#timeline :focus-visible { outline: 2px solid var(--hud-ink, #ecfaff); outline-offset: 2px; }
#timeline .num { font-variant-numeric: tabular-nums; letter-spacing: 0; }
#timeline button {
  min-height: 32px;
  padding: 4px 12px;
  border: 0;
  background: var(--hp-reading, #102532);
  color: var(--hp-muted, #a1c2d1);
  font: inherit;
  font-size: 12px;
  letter-spacing: .04em;
  cursor: pointer;
}
#timeline button:hover:not(:disabled) { background: var(--hp-reading, #193342); color: var(--hud-ink, #ecfaff); }
#timeline button.primary, #timeline button[aria-pressed=true] { background: var(--hud-cyan, #69d9ff); color: var(--hp-reading, #04131c); }
#timeline button.primary:hover:not(:disabled), #timeline button[aria-pressed=true]:hover:not(:disabled) { background: var(--hud-cyan, #91e4ff); color: var(--hp-reading, #04131c); }
#timeline button:disabled, #timeline input:disabled { opacity: .4; cursor: not-allowed; }
#timeline .picker-top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  border: 0;
  background: var(--hp-reading, #102532);
  color: var(--hp-muted, #a1c2d1);
  font: inherit;
  font-size: 11px;
  letter-spacing: .2em;
}
#timeline .picker-top > span { min-width: 0; overflow-wrap: anywhere; }
#timeline .tm-status { margin-left: auto; color: var(--hp-muted, #527e90); font-size: 11px; letter-spacing: .04em; }
#timeline #tm-close { flex: none; width: 32px; height: 32px; padding: 0; font-size: 24px; line-height: 1; }
#timeline .tm-scrubber { position: relative; flex: none; padding: 12px 16px; }
#timeline #tm-scrub {
  display: block;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
#timeline #tm-scrub::-webkit-slider-runnable-track { height: 2px; border: 0; background: var(--hp-reading, #1b3a4c); border-radius: 0; box-shadow: none; }
#timeline #tm-scrub::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 0; box-shadow: none; background: var(--hud-cyan, #69d9ff); }
#timeline #tm-scrub::-moz-range-track { height: 2px; border: 0; border-radius: 0; box-shadow: none; background: var(--hp-reading, #1b3a4c); }
#timeline #tm-scrub::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 0; box-shadow: none; background: var(--hud-cyan, #69d9ff); }
/* Six-pixel endpoint inset matches the center of the square range thumb. */
#timeline .tm-ticks { position: absolute; top: 12px; left: 22px; right: 22px; height: 10px; pointer-events: none; }
#timeline .tm-ticks > i { position: absolute; top: 0; width: 2px; height: 10px; transform: translateX(-50%); background: var(--tone); }
#timeline [data-kind=task] { --tone: var(--hud-cyan, #69d9ff); }
#timeline [data-kind=artifact] { --tone: var(--hp-done, #9be7a8); }
#timeline [data-kind=scene] { --tone: var(--hud-amber, #e5aa63); }
#timeline [data-kind=proposal] { --tone: var(--hp-muted, #527e90); }
#timeline .tm-range { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; margin-top: 4px; color: var(--hp-muted, #527e90); font-size: 11px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#timeline .tm-cursor { color: var(--hud-ink, #ecfaff); text-align: center; }
#timeline .tm-to { text-align: right; }
#timeline .tm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); flex: 1; min-height: 80px; min-width: 0; }
#timeline #tm-events, #timeline #tm-detail { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--hp-muted, #527e90) var(--hp-reading, #0c1b26); }
#timeline #tm-events { margin: 0; padding: 4px 0; list-style: none; }
#timeline .tm-event { position: relative; display: grid; grid-template-columns: 16px 56px minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding: 8px 12px; cursor: pointer; overflow-wrap: anywhere; }
#timeline .tm-event:hover, #timeline .tm-event:focus-visible, #timeline .tm-event.selected { background: var(--hp-reading, #102532); }
#timeline .tm-event.selected::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--hud-cyan, #69d9ff); }
#timeline .tm-event:focus-visible { outline-offset: -2px; }
#timeline .tm-glyph { color: var(--tone); font-style: normal; font-size: 14px; text-align: center; }
#timeline .tm-event[data-state=failed] .tm-glyph { color: var(--hud-amber, #e5aa63); }
#timeline .tm-event[data-state=done] .tm-glyph { color: var(--hp-done, #9be7a8); }
#timeline .tm-when, #timeline .tm-kind { color: var(--hp-muted, #527e90); font-size: 11px; }
#timeline .tm-title { min-width: 0; color: var(--hud-ink, #ecfaff); font-size: 12px; font-weight: 400; }
#timeline #tm-detail { padding: 12px 16px; background: var(--hp-reading, #0a1620); overflow-wrap: anywhere; }
#timeline .tm-detail-when { margin: 0 0 8px; color: var(--hp-muted, #527e90); font-size: 11px; }
#timeline #tm-detail h3 { margin: 0 0 12px; color: var(--hud-ink, #ecfaff); font-size: 18px; font-weight: 300; letter-spacing: .1em; font-feature-settings: "palt"; }
#timeline .tm-detail-text { margin: 0 0 12px; font-size: 12px; white-space: pre-wrap; }
#timeline .tm-facts { margin: 0; padding: 8px; list-style: none; background: var(--hp-reading, #0c1b26); color: var(--hp-muted, #a1c2d1); font-size: 11px; }
#timeline .tm-facts > li + li { margin-top: 4px; }
#timeline .tm-empty { margin: 0; color: var(--hp-muted, #527e90); font-size: 12px; }
#timeline .tm-actions { display: flex; flex: none; flex-wrap: wrap; gap: 8px; padding: 12px 16px; background: var(--hp-reading, #0a1620); }
#timeline [data-status=ok], #timeline [data-status=server] { color: var(--hud-cyan, #69d9ff); }
#timeline [data-status=local] { color: var(--hud-amber, #e5aa63); }
#timeline [data-status=unavailable] { border-left: 3px solid var(--hud-amber, #e5aa63); padding-left: 8px; color: var(--hud-amber, #e5aa63); }
#timeline [data-status=demo], dialog#timeline.demo { border: 1px dotted var(--hp-muted, #527e90); }
#timeline [data-status=empty] { color: var(--hp-muted, #527e90); }
@media (max-width: 760px) {
  dialog#timeline { left: 8px; right: 8px; bottom: 8px; width: auto; height: 60vh; }
  #timeline .tm-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 120px; }
  #timeline button { min-height: 40px; }
  #timeline #tm-close { width: 40px; height: 40px; }
}

html[data-hud="v27"] #timeline {
  & .tm-grid { display:block; }
  & :is(#tm-events,#tm-detail,.tm-scrubber,.tm-actions) { background:var(--hp-reading); overflow:visible; }
  & #tm-events { margin:8px; border-left:1px solid var(--hp-edge); }
  & .tm-event { padding:8px; grid-template-columns:12px 48px minmax(0,1fr); border-bottom:1px solid var(--hp-hairline); }
  & .tm-kind { grid-column:3; }
  & .tm-facts { background:transparent; padding:0; }
  & #tm-scrub { min-height:24px; }
}