@layer components {
  .rx-calendar {
    --rx-calendar-scroll-size: min(40rem, 75dvh);
    --rx-calendar-meta-size: clamp(0.6875rem, calc(0.666667rem + 0.104167vw), 0.75rem);
    --rx-calendar-quiet: var(--rx-gray-20);
    /* 日の区切りの線。BC2のカレンダーの暖かい灰色の1pxの罫線（lists.md「BC2 カレンダー」の#dcd9d2）。 */
    --rx-calendar-line: var(--rx-calendar-rule);
    /*
      前後の月の日付と予定の時刻の淡い灰色。実測（2013年版の前月の日・時刻の#bbbbbb前後）は白地で4.5:1に届かないので、
      色合いを保って明るさを下げる。
    */
    --rx-calendar-faint: #767676;
    /* 今日の「今日 21」の文字。実測の#333333。 */
    --rx-calendar-today-text: #333333;
    /* 今日の列（週の時間割）に敷く、ごく淡い黄色。 */
    --rx-calendar-today-soft: color-mix(in srgb, var(--rx-mark) 45%, var(--rx-surface));
    min-inline-size: 0;
    color: var(--rx-text);
    font-family: var(--rx-control-font-family);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    & > .controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: start;
      gap: var(--rx-space-2) var(--rx-space-3);
      /* 見出しの行は線で区切らず、下の曜日の行との間を空けるだけにする。 */
      padding-block: 0 var(--rx-space-3);
      /* 期間の見出しはSectionの見出しと同じ、赤茶の通常の太さの文字。 */
      & > h2 {
        min-inline-size: 0;
        margin: 0;
        color: var(--rx-heading);
        font-family: var(--rx-font);
        font-size: var(--rx-section-title);
        font-weight: 400;
        line-height: var(--rx-button-size);
        & > .week-number {
          margin-inline-start: var(--rx-space-2);
          color: var(--rx-meta);
          font-size: var(--rx-small);
          font-weight: 400;
        }
      }
      & > .period {
        display: inline-flex;
        flex-wrap: wrap;
        grid-column: 2 / 4;
        justify-self: end;
        gap: var(--rx-space-1);
        & > .rx-button > .previous-icon {
          display: inline-flex;
          rotate: 180deg;
        }
      }
      & > .rx-filter-bar {
        grid-column: 1 / 3;
      }
      & > .actions {
        display: flex;
        flex-wrap: wrap;
        grid-column: 3;
        justify-content: end;
        gap: var(--rx-space-1);
      }
    }
    & > .viewport {
      min-inline-size: 0;
      overflow: auto;
      overscroll-behavior-inline: contain;
      &:focus-visible {
        outline: 0.125rem solid var(--rx-link);
        outline-offset: -0.125rem;
      }
      /*
        月はBasecamp 2のカレンダーと同じく、外枠を持たず、日の間の暖かい灰色の細い線だけで区切る表。
        日付は日のセルの末尾側の上に灰色の数字で置き、今日はセル全体を黄色で塗って「今日 21」と太字で書く。
      */
      & > table {
        inline-size: 100%;
        min-inline-size: 35rem;
        table-layout: fixed;
        border-collapse: separate;
        border-spacing: 0;
        background: var(--rx-surface);
        & > caption {
          position: absolute;
          inline-size: 0.0625rem;
          block-size: 0.0625rem;
          padding: 0;
          overflow: hidden;
          clip-path: inset(50%);
          white-space: nowrap;
        }
        /* 曜日は#666の11pxの文字を中央に置き、塗らずに下に日の区切りと同じ線を引く（実測）。 */
        & > thead > tr > th {
          padding-block: var(--rx-space-2);
          padding-inline: var(--rx-space-1);
          border-block-end: var(--rx-stroke-width) solid var(--rx-calendar-line);
          color: var(--rx-muted);
          font-size: var(--rx-small);
          font-weight: 400;
          line-height: 1rem;
          text-align: center;
        }
        & > tbody > tr > td {
          position: relative;
          block-size: 6.5rem;
          padding-block: var(--rx-space-1) var(--rx-space-2);
          padding-inline: var(--rx-space-1);
          border-inline-end: var(--rx-stroke-width) solid var(--rx-calendar-line);
          border-block-end: var(--rx-stroke-width) solid var(--rx-calendar-line);
          background: var(--rx-surface);
          text-align: end;
          vertical-align: top;
          /* 外周の縦線は引かない。縦線は列の間だけ（実測）。 */
          &:last-child {
            border-inline-end: 0;
          }
          /* 今日はセル全体を黄色で塗る（実測の#ffffcbを、黄色のハイライトの#ffffccにそろえる）。 */
          &[data-current="true"] {
            background: var(--rx-mark);
          }
          & > .weekday {
            display: none;
          }
          & > .events {
            display: grid;
            gap: 0.125rem;
            min-inline-size: 0;
            margin: 0;
            margin-block-start: 0.125rem;
            padding: 0;
            list-style: none;
            text-align: start;
            & > li {
              min-inline-size: 0;
            }
          }
        }
        & > tbody > tr:last-child > :is(td, th) {
          border-block-end: 0;
        }
        /* 前後の月の日は塗らず、日付の数字を淡い灰色にする（2013年版の前月の日）。 */
        & > tbody > tr > td[data-outside="true"] > :is(a, time).day {
          color: var(--rx-calendar-faint);
        }
        /* 使えない日は、使えない操作と同じく面をそのままにして、日付の文字だけを灰色にする。 */
        & > tbody > tr > td[data-disabled="true"] > :is(a, time, .rx-button).day {
          color: var(--rx-disabled-text);
        }
        /* 週番号は日付の数字と同じ高さの、小さな茶色の数字の列。 */
        & > thead > tr > th.week-number {
          inline-size: 2rem;
          border-inline-end: var(--rx-stroke-width) solid var(--rx-calendar-line);
          font-size: var(--rx-calendar-meta-size);
        }
        & > tbody > tr > th.week-number {
          padding-block: var(--rx-space-1) 0;
          padding-inline: 0;
          border-inline-end: var(--rx-stroke-width) solid var(--rx-calendar-line);
          border-block-end: var(--rx-stroke-width) solid var(--rx-calendar-line);
          color: var(--rx-meta);
          font-size: var(--rx-calendar-meta-size);
          font-weight: 400;
          font-variant-numeric: tabular-nums;
          line-height: 1.5rem;
          text-align: center;
          vertical-align: top;
        }
      }
    }
    /* 選択用の日付は共通Buttonを使い、面と影を外して数字だけにそろえる。button.cssより強い詳細度を保ち、読み込み順に左右されない。 */
    & > .viewport > table > tbody > tr > td,
    & > .viewport > .week > .column > .heading > .date {
      & > .rx-button.day {
        border-color: transparent;
        background: transparent;
        background-image: none;
        color: var(--rx-muted);
        box-shadow: none;
        font-variant-numeric: tabular-nums;
        &:hover:not(:disabled):not([data-state]) {
          border-color: var(--rx-control-border);
          background: var(--rx-surface);
          background-image: var(--rx-fill-control);
          color: var(--rx-text);
          box-shadow: var(--rx-shadow-control);
        }
        &:active:not(:disabled):not([data-state]) {
          background: var(--rx-cover);
          box-shadow: var(--rx-shadow-control-pressed);
        }
        &[data-current="true"]:not(
            [data-state="selected"],
            [data-state="range-start"],
            [data-state="range-end"]
          ) {
          color: var(--rx-calendar-today-text);
        }
        /* 選んだ日は、選ぶ操作の共通の見た目（--rx-selected-*）。期間の間の日は、選んでいる項目の淡い青の面。 */
        &:is([data-state="selected"], [data-state="range-start"], [data-state="range-end"]) {
          border-color: var(--rx-selected-edge);
          border-block-end-color: var(--rx-selected-edge-end);
          background: var(--rx-selected-fill);
          color: var(--rx-selected-text);
          box-shadow: none;
        }
        &[data-state="in-range"] {
          border-color: var(--rx-option-active);
          background: var(--rx-option-active);
          color: var(--rx-text);
        }
      }
    }
    /*
      予定はBasecamp 2のカレンダーと同じく、分類の色（既定は青）の「• 題名」の通常の太さの文字で置く。面は塗らない。
      時刻は淡い灰色にする（実測）。分類の青は実測の#2a81c4では白地と今日の黄色の上で4.5:1に届かないので、--rx-blueにする。
      終日の予定（月の日と週の終日の行）は、分類の色で塗った両端の丸い帯に白い太字で書く（下の規則）。
      過去の予定は文字を淡くする。
    */
    & > .viewport > table > tbody > tr > td > .events > li > .event,
    & > .viewport > .week > .column > .all-day > ul > li > .event,
    & > .viewport > .week > .column > .timed > ol > li > .event,
    & > .agenda > .agenda-group > .events > li > .event {
      --rx-calendar-event-color: var(--rx-blue);
      /*
        終日の帯の塗り。実測の#2b84c6は白い文字との対比が4.0なので、色合いを保って4.5:1まで明るさを下げる。
        他の分類は分類の色のまま塗る（どれも白い文字と4.5:1以上）。
      */
      --rx-calendar-event-band: #277abb;
      --rx-calendar-event-soft: var(--rx-cover);
      --rx-calendar-event-fill: transparent;
      display: flex;
      align-items: baseline;
      gap: var(--rx-space-1);
      min-inline-size: 0;
      padding-block: 0.0625rem;
      padding-inline: 0.125rem;
      border-radius: var(--rx-radius-mark);
      background: var(--rx-calendar-event-fill);
      color: var(--rx-calendar-event-color);
      font-size: var(--rx-small);
      line-height: 1rem;
      text-decoration: none;
      /* 詳細を持つ予定はbutton。リンクの予定と同じ見た目にそろえ、文字の指定はこのファイルが持つ。 */
      &:is(button) {
        appearance: none;
        inline-size: 100%;
        margin: 0;
        border: 0;
        font-family: inherit;
        font-weight: inherit;
        text-align: start;
        cursor: pointer;
      }
      &:hover > .label {
        text-decoration-line: underline;
        text-decoration-thickness: var(--rx-stroke-width);
        text-underline-offset: 0.15em;
      }
      &:focus-visible {
        outline: 0.125rem solid var(--rx-link);
        outline-offset: 0;
      }
      &[data-accent="green"] {
        --rx-calendar-event-color: var(--rx-green);
        --rx-calendar-event-band: var(--rx-green);
        --rx-calendar-event-soft: var(--rx-success-soft);
      }
      &[data-accent="amber"] {
        --rx-calendar-event-color: var(--rx-amber);
        --rx-calendar-event-band: var(--rx-amber);
        --rx-calendar-event-soft: var(--rx-warning-soft);
      }
      &[data-accent="coral"] {
        --rx-calendar-event-color: var(--rx-coral);
        --rx-calendar-event-band: var(--rx-coral);
        --rx-calendar-event-soft: var(--rx-danger-soft);
      }
      /* 題名の前の点。分類の色の小さな丸で、一行の題名の高さの中ほどに置く。 */
      & > .bar {
        flex: none;
        align-self: center;
        inline-size: 0.25rem;
        block-size: 0.25rem;
        border-radius: 50%;
        background: currentColor;
      }
      & > .time {
        flex: none;
        color: var(--rx-calendar-faint);
        font-size: var(--rx-calendar-meta-size);
        font-variant-numeric: tabular-nums;
      }
      & > .label {
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      /* 仮の予定は「まだ確定していない」なので、破線の縁で囲む。斜線は「使えない」の語彙なので重ねない。 */
      &[data-tentative="true"] {
        outline: var(--rx-stroke-width) dashed var(--rx-perforation);
        outline-offset: calc(var(--rx-stroke-width) * -1);
      }
      &[data-past="true"] {
        color: color-mix(in srgb, var(--rx-calendar-event-color) 55%, var(--rx-muted));
      }
    }
    /*
      月の表の予定は、日付の数字より一段大きい文字にする。
      実測: bc2-tour-2014-11-calendar.jpg（2倍）。予定「Install」の字の高さ8px、日付の数字の高さ7px。数字の11pxに対して予定は --rx-label（12px）。
    */
    & > .viewport > table > tbody > tr > td > .events > li > .event {
      font-size: var(--rx-label);
    }
    /*
      終日の予定は、Basecamp 2の複数日の予定の帯（lists.md）。高さ16px・角丸8px（両端が丸い）、分類の色の塗りに、
      白の太字の12px、左の余白9px。
      仮の予定は塗らずに分類の色の破線で囲み、過去の予定は淡い面に分類の色の文字にする。
    */
    & > .viewport > table > tbody > tr > td > .events > li > .event[data-all-day="true"],
    & > .viewport > .week > .column > .all-day > ul > li > .event[data-all-day="true"] {
      --rx-calendar-event-fill: var(--rx-calendar-event-band);
      padding-block: 0;
      padding-inline: 0.5625rem 0.375rem;
      border-radius: var(--rx-radius-pill);
      color: var(--rx-surface);
      font-weight: 700;
      line-height: 1rem;
      & > .bar {
        display: none;
      }
      & > .time {
        color: inherit;
      }
      &:hover {
        background: color-mix(in srgb, var(--rx-calendar-event-band) 86%, var(--rx-ink));
      }
      &[data-tentative="true"] {
        --rx-calendar-event-fill: var(--rx-surface);
        color: var(--rx-calendar-event-color);
        outline-color: var(--rx-calendar-event-color);
        &:hover {
          background: var(--rx-calendar-event-soft);
        }
      }
      &[data-past="true"] {
        --rx-calendar-event-fill: var(--rx-calendar-event-soft);
        color: color-mix(in srgb, var(--rx-calendar-event-color) 80%, var(--rx-ink));
        &:hover {
          background: color-mix(in srgb, var(--rx-calendar-event-soft) 90%, var(--rx-ink));
        }
      }
    }
    /*
      週・日の時間割は0〜24時を描画し、画面に収まる高さでスクロールする。見出しと終日の行は上に固定する。
      高さは--rx-calendar-scroll-sizeで変えられる。
    */
    /* 時間割も外枠を持たず、日の間の淡い線だけで区切る。 */
    &[data-view="week"] > .viewport {
      max-block-size: var(--rx-calendar-scroll-size);
      overscroll-behavior: contain;
    }
    /* 1時間を52pxとし、予定の位置と長さを0時からの分で求める。 */
    & > .viewport > .week {
      --rx-calendar-hour: 3.25rem;
      --rx-calendar-heading-size: 2.5rem;
      --rx-calendar-first-hour: 0;
      --rx-calendar-hours: 24;
      --rx-calendar-days: 7;
      --rx-calendar-core-start: 0;
      --rx-calendar-core-end: 24;
      display: grid;
      grid-template-columns: 3.5rem repeat(var(--rx-calendar-days), minmax(6.5rem, 1fr));
      grid-template-rows: auto auto auto;
      position: relative;
      min-inline-size: calc(3.5rem + var(--rx-calendar-days) * 6.5rem);
      background: var(--rx-surface);
      /*
        開いた時の表示位置。時間割全体の左端に置き、横にはスクロールさせない。時間割の上端は固定した見出しと
        終日の行の高さ分だけ下にあるため、目的の時刻をそのまま使うとスクロール領域の上端で見出しの直下に来る。
      */
      & > .scroll-target {
        --rx-calendar-target: 0;
        position: absolute;
        inset-block-start: calc(var(--rx-calendar-target) * var(--rx-calendar-hour) / 60);
        inset-inline-start: 0;
        inline-size: var(--rx-stroke-width);
        block-size: var(--rx-stroke-width);
        scroll-initial-target: nearest;
        pointer-events: none;
      }
      & > .corner {
        position: sticky;
        inset-block-start: 0;
        inset-inline-start: 0;
        z-index: 4;
        grid-row: 1;
        grid-column: 1;
        border-block-end: var(--rx-stroke-width) solid var(--rx-calendar-line);
        background: var(--rx-surface);
      }
      & > :is(.all-day-label, .hours) {
        position: sticky;
        inset-inline-start: 0;
        z-index: 2;
        grid-column: 1;
        background: var(--rx-surface);
        color: var(--rx-muted);
        font-size: var(--rx-calendar-meta-size);
        font-variant-numeric: tabular-nums;
        line-height: 1rem;
        text-align: end;
      }
      & > .all-day-label {
        inset-block-start: var(--rx-calendar-heading-size);
        z-index: 4;
        grid-row: 2;
        padding-block: var(--rx-space-1);
        padding-inline: 0 var(--rx-space-2);
        border-block-end: var(--rx-stroke-width) solid var(--rx-calendar-line);
      }
      & > .hours {
        position: sticky;
        grid-row: 3;
        & > span {
          --rx-calendar-hour-index: 0;
          position: absolute;
          inset-block-start: calc(var(--rx-calendar-hour-index) * var(--rx-calendar-hour));
          inset-inline-end: var(--rx-space-2);
          /* 時刻を線の高さの中央に置く。上端の時刻だけは時間割の外へはみ出さないよう上端に揃える。 */
          translate: 0 -50%;
          &:first-child {
            translate: none;
          }
        }
        /* 現在時刻は塗らずに線と同じ色の太字で書く。下の時刻は地の色で隠す。 */
        & > .now-label {
          --rx-calendar-now: 0;
          inset-block-start: calc(
            (var(--rx-calendar-now) - var(--rx-calendar-first-hour) * 60) *
              var(--rx-calendar-hour) / 60
          );
          z-index: 1;
          padding-block: 0.125rem;
          padding-inline: 0.25rem;
          background: var(--rx-surface);
          color: var(--rx-coral);
          font-weight: 700;
        }
      }
      & > .column {
        grid-row: 1 / 4;
        display: grid;
        grid-template-rows: subgrid;
        min-inline-size: 0;
        & > .heading {
          position: sticky;
          inset-block-start: 0;
          z-index: 3;
          /* 曜日と日付は、日の末尾側に「木 24」と灰色の文字で並べる。 */
          display: flex;
          justify-content: end;
          align-items: center;
          block-size: var(--rx-calendar-heading-size);
          padding-inline: var(--rx-space-2);
          border-block-end: var(--rx-stroke-width) solid var(--rx-calendar-line);
          background: var(--rx-surface);
          & > .date {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            color: var(--rx-muted);
            & > .weekday {
              font-size: var(--rx-small);
            }
          }
        }
        /* 今日の列は、月の今日と同じく見出しを黄色で塗り、時間割にもごく淡い黄色を敷く。 */
        &[data-current="true"] {
          & > .heading {
            background: var(--rx-mark);
          }
          & > .heading > .date {
            color: var(--rx-calendar-today-text);
          }
          & > :is(.all-day, .timed) {
            background-color: var(--rx-calendar-today-soft);
          }
        }
        &[data-weekend="true"]:not([data-current="true"]) > .heading > .date > :is(.weekday, .day) {
          color: var(--rx-calendar-faint);
        }
        &[data-outside="true"] > .heading > .date > :is(.weekday, .day) {
          color: var(--rx-muted);
        }
        & > :is(.all-day, .timed) {
          min-inline-size: 0;
          border-inline-start: var(--rx-stroke-width) solid var(--rx-calendar-line);
        }
        & > .all-day {
          position: sticky;
          inset-block-start: var(--rx-calendar-heading-size);
          z-index: 3;
          background: var(--rx-surface);
          padding-block: var(--rx-space-1);
          padding-inline: 0.125rem;
          border-block-end: var(--rx-stroke-width) solid var(--rx-calendar-line);
          & > ul {
            display: grid;
            gap: 0.125rem;
            margin: 0;
            padding: 0;
            list-style: none;
            /* 下の時間割の予定と同じ文字の大きさにそろえる。 */
            & > li > .event {
              font-size: var(--rx-calendar-meta-size);
            }
          }
        }
        /*
          時間の線は1時間ごと。各時間の下端に引き、終日の行の境界線と重なる0時の線と、枠と重なる24時の線は
          描かない（高さを線1本分詰めて24時の線を外す）。稼働時間の外はわずかに塗る。
        */
        & > .timed {
          position: relative;
          block-size: calc(
            var(--rx-calendar-hours) * var(--rx-calendar-hour) - var(--rx-stroke-width)
          );
          background:
            repeating-linear-gradient(
              to bottom,
              transparent 0 calc(var(--rx-calendar-hour) - var(--rx-stroke-width)),
              var(--rx-calendar-line) calc(var(--rx-calendar-hour) - var(--rx-stroke-width))
                var(--rx-calendar-hour)
            ),
            linear-gradient(
              to bottom,
              var(--rx-calendar-quiet)
                calc(
                  (var(--rx-calendar-core-start) - var(--rx-calendar-first-hour)) *
                    var(--rx-calendar-hour)
                ),
              transparent
                calc(
                  (var(--rx-calendar-core-start) - var(--rx-calendar-first-hour)) *
                    var(--rx-calendar-hour)
                )
                calc(
                  (var(--rx-calendar-core-end) - var(--rx-calendar-first-hour)) *
                    var(--rx-calendar-hour)
                ),
              var(--rx-calendar-quiet)
                calc(
                  (var(--rx-calendar-core-end) - var(--rx-calendar-first-hour)) *
                    var(--rx-calendar-hour)
                )
            );
          & > ol {
            margin: 0;
            padding: 0;
            list-style: none;
            & > li {
              /* 開始・終了は0時からの分。重なる予定は列数で幅を等分する。 */
              --rx-calendar-start: 0;
              --rx-calendar-end: 60;
              --rx-calendar-lane: 0;
              --rx-calendar-lanes: 1;
              position: absolute;
              inset-block-start: calc(
                (var(--rx-calendar-start) - var(--rx-calendar-first-hour) * 60) *
                  var(--rx-calendar-hour) / 60 + 0.0625rem
              );
              inset-inline-start: calc(
                0.125rem + (100% - 0.25rem) * var(--rx-calendar-lane) / var(--rx-calendar-lanes)
              );
              inline-size: calc((100% - 0.25rem) / var(--rx-calendar-lanes) - 0.125rem);
              block-size: max(
                1.25rem,
                calc(
                  (var(--rx-calendar-end) - var(--rx-calendar-start)) * var(--rx-calendar-hour) /
                    60 - 0.125rem
                )
              );
              /*
                時刻のある予定は時間の長さの小さな札。分類の淡い色の面に、先頭側の縁を分類の色の線にし、文字は濃い色にする。
                短い予定や狭い列でも題名を先に読めるよう、題名を折り返して時刻を後に置く。
              */
              & > .event {
                --rx-calendar-event-fill: var(--rx-calendar-event-soft);
                position: relative;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                block-size: 100%;
                padding-block: 0.1875rem;
                padding-inline: 0.5rem 0.375rem;
                overflow: hidden;
                /* 先頭側の縁に線を引くので、角は丸めない（線の端が丸く欠けないようにする）。 */
                border-radius: 0;
                color: var(--rx-text);
                box-shadow: inset var(--rx-frame-width) 0 0 var(--rx-calendar-event-color);
                font-size: var(--rx-calendar-meta-size);
                &:dir(rtl) {
                  box-shadow: inset calc(var(--rx-frame-width) * -1) 0 0
                    var(--rx-calendar-event-color);
                }
                &:hover {
                  background: color-mix(in srgb, var(--rx-calendar-event-soft) 90%, var(--rx-ink));
                }
                &[data-tentative="true"] {
                  --rx-calendar-event-fill: var(--rx-surface);
                  box-shadow: none;
                }
                &[data-past="true"] {
                  --rx-calendar-event-fill: color-mix(
                    in srgb,
                    var(--rx-calendar-event-soft) 55%,
                    var(--rx-surface)
                  );
                  color: var(--rx-muted);
                }
                & > .bar {
                  display: none;
                }
                & > .time {
                  color: color-mix(in srgb, var(--rx-calendar-event-color) 75%, var(--rx-text));
                }
                & > .label {
                  font-weight: 600;
                  order: -1;
                  flex: none;
                  white-space: normal;
                  overflow-wrap: anywhere;
                }
                & > .time {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
              /* 45分未満は高さが一行分なので、題名と時刻を一行に並べて題名を優先する。 */
              &[data-length="short"] > .event {
                flex-direction: row;
                gap: var(--rx-space-1);
                padding-block: 0.125rem;
                & > .label {
                  flex: none;
                  max-inline-size: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                & > .time {
                  flex: 0 1 auto;
                  min-inline-size: 0;
                }
              }
            }
          }
          /* 現在時刻は、今日の列を横切る細い破線。 */
          & > .now {
            --rx-calendar-now: 0;
            position: absolute;
            inset-block-start: calc(
              (var(--rx-calendar-now) - var(--rx-calendar-first-hour) * 60) *
                var(--rx-calendar-hour) / 60 - var(--rx-stroke-width)
            );
            inset-inline: 0;
            z-index: 1;
            block-size: calc(var(--rx-stroke-width) * 2);
            background: repeating-linear-gradient(
              to right,
              var(--rx-coral) 0 var(--rx-dash),
              transparent var(--rx-dash) calc(var(--rx-dash) + var(--rx-dash-gap))
            );
            pointer-events: none;
          }
        }
      }
    }
    & > .year-overview {
      --rx-calendar-year-meta-size: clamp(0.625rem, calc(0.604167rem + 0.104167vw), 0.6875rem);
      container: rx-calendar-year / inline-size;
      min-inline-size: 0;
      padding-block: var(--rx-space-3);
      & > .year-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        /*
          月・週の表示と同じく、グリッドは外枠に角丸を付けず、セルの線だけで区切る
          （角丸で切り抜くと、角のセルの縁の線と、セルいっぱいのホバー時の枠が角で欠けてずれる）。
        */
        border-block-start: var(--rx-stroke-width) solid var(--rx-calendar-line);
        border-inline-start: var(--rx-stroke-width) solid var(--rx-calendar-line);
        & > :is(.lead, .year-day) {
          min-inline-size: 0;
          min-block-size: 3.25rem;
          border-inline-end: var(--rx-stroke-width) solid var(--rx-calendar-line);
          border-block-end: var(--rx-stroke-width) solid var(--rx-calendar-line);
        }
        & > .year-day {
          position: relative;
          padding-block: var(--rx-space-1);
          padding-inline: var(--rx-space-1);
          background: var(--rx-surface);
          &[data-weekend="true"] {
            background: var(--rx-calendar-quiet);
          }
          /* 月の始まりは、先頭側の縁の線を濃くして月の切れ目を見せる。 */
          &[data-month-start="true"] {
            padding-block-start: 1.125rem;
            box-shadow: inset var(--rx-frame-width) 0 0 var(--rx-control-border);
            &:dir(rtl) {
              box-shadow: inset calc(var(--rx-frame-width) * -1) 0 0 var(--rx-control-border);
            }
          }
          &[data-events="true"] {
            background: var(--rx-info-soft);
          }
          &[data-current="true"] {
            background: var(--rx-mark);
          }
          /*
            ホバー時の面と枠は角丸にし、セルの線から上下左右とも同じ2pxだけ内側に離して浮かべる
            （セルいっぱいに角丸を置くと、辺はセルの線に接するのに角だけ離れて、ずれて見える）。
          */
          & > .month-link {
            position: absolute;
            inset: 0.125rem;
            z-index: 2;
            border-radius: var(--rx-radius-control);
            color: inherit;
            text-decoration: none;
            &:hover {
              outline: var(--rx-stroke-width) solid var(--rx-link);
              outline-offset: 0;
            }
            &:focus-visible {
              outline: 0.125rem solid var(--rx-link);
              outline-offset: 0;
            }
          }
          /* 月の名前は、セルの先頭側の上に赤茶の小さな太字で書く。 */
          & > .month-label,
          & > .month-link > .month-label {
            position: absolute;
            inset-block-start: 0;
            inset-inline-start: 0;
            z-index: 2;
            padding-block: 0.0625rem;
            padding-inline: var(--rx-space-1);
            color: var(--rx-heading);
            font-size: var(--rx-calendar-year-meta-size);
            font-weight: 600;
            line-height: 1.2;
            white-space: nowrap;
            pointer-events: none;
          }
          /* 週の最後の列で始まる月は、ラベルを末尾側に寄せて、文字を大きくしても表の外へはみ出さない。 */
          &[data-last-column="true"] > .month-label,
          &[data-last-column="true"] > .month-link > .month-label {
            inset-inline: auto 0;
          }
          & > .date-link {
            position: absolute;
            inset: 0.125rem;
            z-index: 1;
            display: flex;
            justify-content: end;
            /* 日付を上に置き、今日のマーカーがセルの高さまで伸びないようにする。 */
            align-items: start;
            /* 内側へ離した2pxの分だけ余白を減らし、リンクのない日と数字の位置をそろえる。 */
            padding-block: calc(var(--rx-space-1) - 0.125rem);
            padding-inline: calc(var(--rx-space-1) - 0.125rem);
            border-radius: var(--rx-radius-control);
            color: inherit;
            text-decoration: none;
            &:hover {
              outline: var(--rx-stroke-width) solid var(--rx-link);
              outline-offset: 0;
            }
            &:focus-visible {
              outline: 0.125rem solid var(--rx-link);
              outline-offset: 0;
            }
            &:is(:hover, :focus-visible) > time > .number {
              color: var(--rx-link);
              text-decoration-line: underline;
            }
          }
          /* 月へのリンクはセル全体を覆うため、日付をその塗りより手前に置き、操作はリンクへ通す。 */
          & > time {
            position: relative;
            z-index: 3;
            pointer-events: none;
          }
          & > time,
          & > .date-link > time {
            display: flex;
            align-items: baseline;
            justify-content: end;
            gap: 0.125rem;
            color: var(--rx-muted);
            font-size: var(--rx-calendar-year-meta-size);
            line-height: 1.25;
            font-variant-numeric: tabular-nums;
            & > .number {
              color: var(--rx-text);
              font-size: var(--rx-small);
            }
          }
          &[data-current="true"] > time,
          &[data-current="true"] > .date-link > time {
            color: var(--rx-ink);
            & > .number {
              color: var(--rx-ink);
              font-weight: 700;
            }
          }
          & > .event-mark {
            position: absolute;
            inset-block-end: var(--rx-space-1);
            inset-inline-end: var(--rx-space-1);
            z-index: 2;
            inline-size: 0.25rem;
            block-size: 0.25rem;
            border-radius: 50%;
            background: var(--rx-link);
            pointer-events: none;
          }
        }
        & > .lead {
          background: var(--rx-calendar-quiet);
        }
      }
      @container rx-calendar-year (inline-size >= 44rem) {
        & > .year-grid {
          grid-template-columns: repeat(14, minmax(0, 1fr));
        }
      }
      @container rx-calendar-year (inline-size >= 88rem) {
        & > .year-grid {
          grid-template-columns: repeat(28, minmax(0, 1fr));
        }
      }
    }
    /* 一覧は日付ごとのまとまり。左に日付、右に月・週と同じ予定の行を時刻の列をそろえて並べる。 */
    & > .agenda {
      display: grid;
      padding-block: var(--rx-space-2);
      & > .agenda-heading {
        margin: 0;
        padding-block: var(--rx-space-2);
        font-size: var(--rx-label);
        font-weight: 600;
      }
      & > .agenda-month {
        margin: 0;
        padding-block: var(--rx-space-3) var(--rx-space-1);
        border-block-start: var(--rx-stroke-width) solid var(--rx-border);
        color: var(--rx-heading);
        font-size: var(--rx-label);
        font-weight: 400;
        line-height: 1rem;
        & + .agenda-group {
          border-block-start: 0;
        }
      }
      & > .agenda-group {
        display: grid;
        grid-template-columns: 4rem minmax(0, 1fr);
        align-items: start;
        gap: var(--rx-space-3);
        min-inline-size: 0;
        /* 一日のまとまりの上下は、予定の行の間より広くし、日ごとの切れ目を見せる。 */
        padding-block: var(--rx-space-3);
        border-block-start: var(--rx-stroke-width) solid var(--rx-border);
        &:first-of-type {
          border-block-start: 0;
        }
        & > h3 {
          margin: 0;
          /* 日付の幅は中身に合わせ、今日のマーカーを行の幅まで伸ばさない。 */
          & > time {
            display: flex;
            inline-size: fit-content;
            align-items: center;
            gap: var(--rx-space-1);
            padding-inline: 0.25rem;
            border-radius: var(--rx-radius-mark);
            color: var(--rx-meta);
            font-size: var(--rx-calendar-meta-size);
            line-height: 1rem;
            & > .number {
              display: inline-grid;
              place-items: center;
              min-inline-size: 1.25rem;
              block-size: 1.75rem;
              color: var(--rx-text);
              font-size: var(--rx-body);
              font-weight: 600;
              font-variant-numeric: tabular-nums;
            }
          }
        }
        /* 今日の日付は黄色のハイライトで塗る。 */
        &[data-current="true"] > h3 > time {
          background: var(--rx-mark);
          color: var(--rx-ink);
          & > .number {
            font-weight: 700;
          }
        }
        & > .events {
          display: grid;
          gap: 0.125rem;
          min-inline-size: 0;
          margin: 0;
          padding: 0;
          list-style: none;
          & > li {
            min-inline-size: 0;
          }
          /* 行の高さは行高で作り、時刻の列をそろえる。題名は本文の大きさで読む。 */
          & > li > .event {
            padding-inline-end: var(--rx-space-2);
            font-size: var(--rx-label);
            line-height: 1.75rem;
            & > .time {
              min-inline-size: 6.5rem;
              color: var(--rx-meta);
            }
          }
        }
      }
    }
    & > .agenda.period-agenda {
      display: none;
    }
    & > .empty {
      margin: 0;
      padding-block: var(--rx-space-6);
      color: var(--rx-muted);
    }
  }
  /* 月の表と週の見出しの日付は同じ見た目。経路をまとめても詳細度が上がらないよう:whereで包む。 */
  /* 日付は#666の数字だけを、セルの末尾側の上に、右端から8pxで置く（実測）。今日は#333の太字にし、月の初日には月の名前を添える。 */
  :where(
    .rx-calendar > .viewport > table > tbody > tr > td,
    .rx-calendar > .viewport > .week > .column > .heading > .date
  ) {
    & > :is(a, time).day {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-inline-size: 1.5rem;
      block-size: 1.5rem;
      padding-inline: 0.25rem;
      border-radius: var(--rx-radius-mark);
      color: var(--rx-muted);
      font-size: var(--rx-small);
      font-weight: 400;
      line-height: 1rem;
      font-variant-numeric: tabular-nums;
      text-decoration: none;
      vertical-align: middle;
      &[data-current="true"] {
        color: var(--rx-calendar-today-text);
        font-weight: 700;
      }
    }
    & > a.day:hover {
      color: var(--rx-link-hover);
      text-decoration-line: underline;
      text-decoration-thickness: var(--rx-stroke-width);
      text-underline-offset: 0.15em;
    }
    & > a.day:focus-visible {
      outline: 0.125rem solid var(--rx-link);
      outline-offset: 0.0625rem;
    }
    /*
      月の始まりは、手本の「November 1」と同じく、日付の数字の前に同じ灰色・同じ太さで月の名前を続ける（「10月 1」）。
      実測: bc2-tour-2014-11-calendar.jpg (1700, 390, 140, 30)。2倍。月の名前と数字は同じ #666666 の通常の太さ。
    */
    & > .month-start {
      color: var(--rx-muted);
      font-size: var(--rx-small);
      font-weight: 400;
      line-height: 1.5rem;
      vertical-align: middle;
      pointer-events: none;
    }
    & > .month-start + :is(a, time).day {
      min-inline-size: 0;
      padding-inline-start: 0.25em;
    }
  }
  /*
    月の表の今日は、セルの黄色に加えて日付の前に「今日」と書き、「今日 21」と読めるようにする。
    読み上げはaria-current="date"が伝えるため、書き足す文字は読み上げから外す。
  */
  :where(
    .rx-calendar > .viewport > table > tbody > tr > td > :is(a, time).day[data-current="true"]
  )::before {
    content: "今日" / "";
    margin-inline-end: 0.25em;
  }
  @media (max-width: 40rem) {
    .rx-calendar {
      & > .controls {
        grid-template-columns: minmax(0, 1fr) auto;
        & > .period {
          grid-column: 2;
        }
        & > .rx-filter-bar {
          grid-column: 1 / -1;
        }
        & > .actions {
          grid-column: 1 / -1;
          justify-content: start;
        }
      }
      & > .agenda.period-agenda {
        display: grid;
      }
      /* 狭い幅では日付を予定の上に置き、時刻と題名は入り切らなければ折り返す。 */
      & > .agenda > .agenda-group {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--rx-space-1);
        & > .events > li > .event {
          flex-wrap: wrap;
          & > .time {
            min-inline-size: 5.5rem;
          }
          & > .label {
            flex: 1 1 8rem;
          }
        }
      }
      &[data-view="month"] > .viewport {
        overflow: visible;
        & > table {
          min-inline-size: 0;
          border-spacing: 0;
          & > thead > tr > th {
            padding-block: var(--rx-space-1);
            padding-inline: 0;
            text-align: center;
          }
          & > tbody > tr > td {
            position: relative;
            block-size: 3.5rem;
            padding: 0;
            border-radius: 0;
            text-align: center;
            & > .month-start {
              display: none;
            }
            & > .rx-button.day {
              min-inline-size: 0;
              inline-size: 100%;
            }
            /* 文字を拡大しても7列に収まるよう、日付はセルの幅を超えない。「今日」の文字はセルの黄色に任せて省く。 */
            & > :is(a, time).day {
              min-inline-size: min(1.5rem, 100%);
              padding-inline: 0;
            }
            & > :is(a, time).day[data-current="true"]::before {
              content: none;
            }
            & > .events {
              display: none;
            }
            &[data-events="true"]::after {
              content: "";
              position: absolute;
              inset-block-end: var(--rx-space-1);
              inset-inline-start: calc(50% - 0.125rem);
              inline-size: 0.25rem;
              block-size: 0.25rem;
              border-radius: 50%;
              background: var(--rx-blue);
              pointer-events: none;
            }
          }
        }
      }
    }
  }
  @media (forced-colors: active) {
    /* 強制カラーでは今日の黄色が消えるため、今日のセル・見出し・日付をシステムの強調色の枠で囲む。 */
    :where(
      .rx-calendar > .viewport > table > tbody > tr > td[data-current="true"],
      .rx-calendar > .viewport > .week > .column[data-current="true"] > .heading,
      .rx-calendar > .agenda > .agenda-group[data-current="true"] > h3 > time,
      .rx-calendar > .year-overview > .year-grid > .year-day[data-current="true"]
    ) {
      outline: var(--rx-frame-width) solid Mark;
      outline-offset: calc(var(--rx-frame-width) * -1);
    }
    .rx-calendar > .viewport > table > tbody > tr > td:is(:hover, :focus-within) {
      outline: var(--rx-stroke-width) solid Highlight;
      outline-offset: -0.0625rem;
    }
  }
}