@layer components {
  /*
    日と時間の格子。Tableと同じくBasecamp Classicの表を手本にする（値の根拠はtable.cssの冒頭）。
    列の見出しは平らな灰色の帯（#e9e9e9、classic-permissions-shaded-header-2007.png）に黒い太字の12px、
    帯の下に1px #acacac、行と列の間は1px #e7e7e7（classic-tour-time-tracking-2008.png の x=570 の縦の列）。
    列の間の縦の線は、Backpackの表（backpack-new-page-permissions-table-2009.png）と同じく行の罫線と同じ淡さにし、外周には引かない。
    時刻の列は灰色の小さな数字（BC2のカレンダーの日付の数字と同じ11pxの#666）にする。今日の列は見出しをCalendarの今日と同じ黄色で塗る。
    ホバーした枠は淡い灰色、選んだ枠（フォーカス）は濃い色の2pxの枠で示す。埋まっている枠は、使えない操作と同じく文字だけを灰色にする。
  */
  .rx-grid {
    --rx-grid-band: #e9e9e9;
    --rx-grid-head-rule: #acacac;
    --rx-grid-rule: #e7e7e7;
    --rx-grid-hover: #f5f5f5;
    min-inline-size: 0;
    overflow: auto;
    overscroll-behavior-inline: contain;
    color: var(--rx-text);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);

    & > .table {
      inline-size: max-content;
      min-inline-size: 100%;
      border: 0;
      border-collapse: collapse;
      border-spacing: 0;
      background: var(--rx-surface);

      & > caption {
        padding-block-end: var(--rx-space-3);
        text-align: start;
        font-size: var(--rx-body);
        font-weight: 700;
        line-height: 1.5;
      }

      & > :is(thead, tbody) > tr > :is(th, td) {
        min-inline-size: 7.5rem;
        padding-block: var(--rx-space-2);
        padding-inline: var(--rx-space-3);
        border-block-end: var(--rx-stroke-width) solid var(--rx-grid-rule);
        text-align: start;
        vertical-align: middle;
        overflow-wrap: anywhere;
      }

      & > :is(thead, tbody) > tr > :is(th, td) + :is(th, td) {
        border-inline-start: var(--rx-stroke-width) solid var(--rx-grid-rule);
      }

      /* 列の見出しはTableと同じ、平らな灰色の帯に黒い太字の12px。帯の高さは24pxで、下端に濃い線を引く。 */
      & > thead > tr > th {
        padding-block: 0.1875rem;
        border-block-end-color: var(--rx-grid-head-rule);
        background: var(--rx-grid-band);
        color: var(--rx-text);
        font-weight: 700;
        white-space: nowrap;
        /* 今日の列の見出しは、Calendarの今日と同じ黄色で塗る。 */
        &[data-current="true"] {
          background: var(--rx-mark);
          color: var(--rx-ink);
        }
      }

      /* 格子の角の見出しと時刻は、日付より控えめな灰色の文字にする。 */
      & > thead > tr > th:first-child,
      & > tbody > tr > th {
        color: var(--rx-muted);
        font-size: var(--rx-small);
        font-variant-numeric: tabular-nums;
      }

      & > tbody > tr > th {
        position: sticky;
        inset-inline-start: 0;
        z-index: 1;
        min-inline-size: 5rem;
        background: var(--rx-surface);
        font-weight: 400;
        white-space: nowrap;
      }

      /* ホバーした枠はTableの行と同じ淡い灰色にする（推測）。 */
      & > tbody > tr > td:not([data-disabled="true"]):hover {
        background: var(--rx-grid-hover);
      }

      /* 使えない・埋まっている枠は、面をそのままにして文字だけを灰色にする。 */
      & > tbody > tr > td[data-disabled="true"] {
        color: var(--rx-disabled-text);
      }

      & > :is(thead, tbody) > tr > :is(th, td):focus-visible {
        position: relative;
        z-index: 2;
        outline: var(--rx-frame-width) solid var(--rx-ink);
        outline-offset: calc(-1 * var(--rx-frame-width));
      }
    }

    & > .empty {
      margin-block-start: var(--rx-space-2);
      padding-block: var(--rx-space-3);
      padding-inline: var(--rx-space-4);
      border: 0;
      border-block: var(--rx-stroke-width) solid var(--rx-grid-rule);
      background: var(--rx-surface);
      color: var(--rx-muted);
    }
  }

  @media (forced-colors: active) {
    .rx-grid > :is(.table, .empty) {
      background: Canvas;
      box-shadow: none;
    }
    .rx-grid > .table > thead > tr > th[data-current="true"] {
      outline: var(--rx-frame-width) solid Mark;
      outline-offset: calc(-1 * var(--rx-frame-width));
    }
  }
}