@layer components {
  /*
    出来事を時の順に読む一覧。実測: lists.md「BC2 Progress（日付ごとの活動）」。
    - 縦の線と日付の丸の輪は暖かい灰色 #dcd9d2（--rx-calendar-rule）。日付の丸は中が白。
      手本の線の幅7pxは画面全体の大きさなので、一覧の部品では2pxに縮める（推測）。出来事の印は日付の丸を小さくした白い丸に同じ色の輪。
    - 項目は「Jonas D. commented on」の太字の黒の名前に、何をしたかを続ける。時刻は茶色の小さな文字（実測 #aa9d83 は4.5:1に届かないので --rx-meta）。
    - システムの出来事は、Highrise 2016のLatest activityと同じく #f8f8f8 の帯にする。
    - 日の区切りは、手本のプロジェクトの見出し「BCX: Building BCX」（黒の太字、約14px）と、その下に縦の線と同じ色で横へ伸びる帯の形にする。
      帯は縦の線とつなげ、太さは縦の線と同じ2pxに縮める（手本は7px。推測）。文字はRetrixの段の --rx-body（13px）の太字の黒。
    節目: 実測 37signals-others/classic-milestones-list-2008.png（Basecamp Classic のMilestones。縮小）。
    - 終えたものは緑（帯 #208a00、日付 #158000 前後）、これからのものの日付と「Today」は橙がかった茶色（#b7790f 前後）。
    - 終えた節目は緑の丸に白いチェック、今の節目はその茶色を4.5:1まで暗くした --rx-amber の丸、これからは破線（線の描き分けは推測）。
      今の時はCalendarの今日と同じ黄色の面を敷く（手本の今日のマス #ffffcc 前後）。
  */
  .rx-timeline {
    --rx-timeline-rule: var(--rx-calendar-rule);
    container: rx-timeline / inline-size;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    padding-inline-start: var(--rx-space-2);
    list-style: none;
    color: var(--rx-text);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    & > li {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--rx-space-1) var(--rx-space-4);
      min-inline-size: 0;
      padding-block: var(--rx-space-3);
      padding-inline-start: var(--rx-space-4);
      border-inline-start: var(--rx-frame-width) solid var(--rx-timeline-rule);
      /* マークは日付の丸を小さくした形。白い丸に線と同じ色の2pxの輪。 */
      & > .marker {
        position: absolute;
        inset-inline-start: calc(-0.3125rem - var(--rx-frame-width) / 2);
        inset-block-start: 1.0625rem;
        display: grid;
        place-items: center;
        inline-size: 0.625rem;
        block-size: 0.625rem;
        border: var(--rx-frame-width) solid var(--rx-timeline-rule);
        border-radius: 50%;
        background: var(--rx-surface);
      }
      & > time {
        color: var(--rx-meta);
        font-family: var(--rx-control-font-family);
        font-size: var(--rx-small);
        line-height: var(--rx-small-leading);
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
      }
      & > .body {
        min-inline-size: 0;
        overflow-wrap: anywhere;
        & > .title {
          color: var(--rx-ink);
          font-size: var(--rx-label);
          font-weight: 700;
          line-height: var(--rx-label-leading);
          & > .actor {
            margin-inline-end: 0.375em;
            font-weight: 700;
          }
        }
        & > * + * {
          margin-block-start: var(--rx-space-1);
        }
      }
    }
    /* 名前を添えた出来事は、名前だけを太字にし、何をしたかは普通の太さで続ける。 */
    & > li[data-actor="true"] > .body > .title {
      font-weight: 400;
    }
    /*
      システムの出来事。線の上のマークを消し、淡い灰色の帯の中央に時刻と文を書く。
      人の出来事と見分けられるよう、帯は線をまたいで本文の幅いっぱいに広げる。
    */
    & > li[data-kind="system"] {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      gap: 0;
      padding-block: var(--rx-space-2);
      padding-inline: var(--rx-space-4);
      /* 先頭側の線は人の出来事だけのもの。帯は角を立て、線を引かない。 */
      border-inline-start: 0;
      background: var(--rx-gray-20);
      text-align: center;
      & > .marker {
        display: none;
      }
      & > time {
        grid-column: 1;
      }
      & > .body {
        grid-column: 1;
        & > .title {
          font-weight: 400;
        }
      }
    }
    /* 何もなかった期間。線を破線にし、マークを置かずに淡い文だけを書く。 */
    & > li[data-kind="gap"] {
      grid-template-columns: minmax(0, 1fr);
      border-inline-start-style: dashed;
      border-inline-start-color: var(--rx-perforation);
      color: var(--rx-muted);
      & > .marker {
        display: none;
      }
      & > time {
        display: none;
      }
      & > .body > .title {
        color: var(--rx-muted);
        font-size: var(--rx-small);
        font-weight: 400;
      }
    }
    /*
      日の区切り。手本のプロジェクトの見出しと同じく、黒の太字の名前の下に、縦の線から横へ伸びる同じ色の帯を引く。
      名前は出来事の時刻の書き始めにそろえる。DividerはこのTimelineの中だけ名前と帯の形に置き換える。
    */
    & > li.day {
      display: grid;
      grid-template-columns: var(--rx-space-4) minmax(0, 1fr);
      gap: var(--rx-space-1) 0;
      padding-block: var(--rx-space-5) 0;
      padding-inline-start: 0;
      &::before {
        content: "";
        grid-row: 2;
        grid-column: 1 / -1;
        block-size: var(--rx-frame-width);
        background: var(--rx-timeline-rule);
      }
      & > .rx-divider {
        grid-row: 1;
        grid-column: 2;
        display: block;
        min-inline-size: 0;
        &::after {
          display: none;
        }
        & > span {
          color: var(--rx-ink);
          font-size: var(--rx-body);
          font-weight: 700;
          line-height: var(--rx-label-leading);
        }
      }
      &:first-child {
        padding-block-start: 0;
      }
    }
    &[data-variant="milestones"] > li {
      &[data-state="complete"] > .marker {
        inline-size: 1rem;
        block-size: 1rem;
        inset-inline-start: calc(-0.5rem - var(--rx-frame-width) / 2);
        inset-block-start: 0.9375rem;
        border: 0;
        background: var(--rx-fill-success);
        box-shadow: 0 0 0 0.125rem var(--rx-surface);
        &::before {
          content: "";
          inline-size: 0.625rem;
          block-size: 0.625rem;
          background: var(--rx-surface);
          mask: url("../assets/check.svg") center / contain no-repeat;
        }
      }
      &[data-state="current"] > .marker {
        border-color: var(--rx-amber);
        background: var(--rx-amber);
        box-shadow: 0 0 0 0.125rem var(--rx-surface);
      }
      /* 今の節目の時（「今日」など）は、Calendarの今日と同じ黄色の面を敷く。 */
      &[data-state="current"] > time {
        position: relative;
        isolation: isolate;
        justify-self: start;
        color: var(--rx-ink);
        font-weight: 700;
        &::before {
          content: "";
          position: absolute;
          inset-block: -0.125rem;
          inset-inline: -0.375rem;
          z-index: -1;
          background: var(--rx-mark);
        }
      }
      /* これからの節目は、マークではなくそこから先の線を破線にする。小さな円の破線は途切れて見えるため。 */
      &[data-state="upcoming"] {
        border-inline-start-style: dashed;
        border-inline-start-color: var(--rx-perforation);
        & > .marker {
          border: 0.125rem solid var(--rx-perforation);
          background: var(--rx-surface);
        }
      }
    }
    /* アバターを置く時は、アバターの中心を線に合わせ、本文をアバターの分だけ離す。一覧の始まりもアバターの半分だけ空け、外へはみ出さない。 */
    &[data-avatars="true"] {
      padding-inline-start: 0.875rem;
    }
    &[data-avatars="true"] > li.day {
      grid-template-columns: var(--rx-space-6) minmax(0, 1fr);
    }
    &[data-avatars="true"] > li:not(.day) {
      padding-inline-start: var(--rx-space-6);
      &:has(> .marker > *) > .marker {
        inset-inline-start: calc(-0.875rem - var(--rx-frame-width) / 2);
        inset-block-start: 0.5rem;
        inline-size: 1.75rem;
        block-size: 1.75rem;
        border: 0;
        background: var(--rx-surface);
        & > .rx-avatar {
          inline-size: 100%;
          block-size: 100%;
          font-size: 0.625rem;
        }
      }
    }
    &[data-variant="compact"] > li:not(.day) {
      gap: var(--rx-space-1) var(--rx-space-3);
      padding-block: var(--rx-space-2);
      & > .marker {
        inset-block-start: 0.875rem;
      }
      & > .body > .title {
        font-weight: 400;
      }
    }
    @container rx-timeline (inline-size >= 28rem) {
      & > li {
        grid-template-columns: 7rem minmax(0, 1fr);
      }
    }
  }
  @media (forced-colors: active) {
    .rx-timeline > li > .marker {
      box-shadow: none;
    }
    .rx-timeline[data-variant="milestones"] > li[data-state="current"] > time::before {
      forced-color-adjust: none;
      background: Mark;
    }
  }
}