@layer components {
  .rx-board {
    container: rx-board / inline-size;
    /*
      開いた列は同じ幅を分け合い、16remより狭くなる分は横にスクロールする。
      たたんだ列だけは細い帯の幅にする。列ごとの決め方は、Boardが要素のstyleで並び順どおりに渡す。
    */
    --rx-board-tracks: none;
    display: grid;
    grid-template-columns: var(--rx-board-tracks);
    grid-auto-flow: column;
    grid-auto-columns: minmax(auto, 1fr);
    /* 全ての列をたたんだ時も、余った幅をたたんだ列へ配らず、先頭側に詰めて並べる。 */
    justify-content: start;
    align-items: stretch;
    gap: var(--rx-space-3);
    min-inline-size: 0;
    overflow: auto;
    /* スクロール領域の下端で列の輪郭が切れないよう、少しだけ余白を取る。 */
    padding-block: var(--rx-space-1) var(--rx-space-2);
    overscroll-behavior-inline: contain;
    color: var(--rx-text);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    /*
      BC2にBoardの手本は無い（推測）。BC2の部品を組み合わせる。
      - 列: 背後に重ねた親のシート（#f9f9f9、1px #e5e5e5、影なし。structure.md）と同じ面。
      - 列の名前: セクションの見出しの赤（18px・400）に、件数の淡い青のピル（lists.md「BC2 のピル」）。
      - 項目: プロジェクトのカード（白、枠なし、短いぼかし影、角丸3px）をBoardItemが持つ。
      列の色は、列の上端の細い線と、項目の番号の文字にだけ出す（推測）。カードは色で染めない。
    */
    & > section {
      --rx-lane-accent: var(--rx-muted);
      --rx-board-lane-edge: inset 0 var(--rx-frame-width) 0 var(--rx-lane-accent);
      min-inline-size: 16rem;
      padding-block: 0 var(--rx-space-2);
      padding-inline: var(--rx-space-2);
      border: var(--rx-stroke-width) solid var(--rx-sheet-behind-edge);
      /* 上端に列の色の線を引くので、角は丸めない（線の端が丸く欠けないようにする）。 */
      border-radius: 0;
      background-color: var(--rx-sheet-behind);
      box-shadow: var(--rx-board-lane-edge);
      &[data-tone="neutral"]:not([data-current="true"]) {
        --rx-board-lane-edge: none;
      }
      &[data-tone="info"] {
        --rx-lane-accent: var(--rx-info);
      }
      &[data-tone="warning"] {
        --rx-lane-accent: var(--rx-warning);
      }
      &[data-tone="success"] {
        --rx-lane-accent: var(--rx-success);
      }
      &[data-tone="danger"] {
        --rx-lane-accent: var(--rx-danger);
      }
      &[data-current="true"] {
        --rx-lane-accent: var(--rx-link);
      }
      /* 列の名前はSectionの見出しと同じく、赤茶の通常の太さの文字にし、件数を名前の隣に置く。 */
      & > .title {
        display: flex;
        align-items: center;
        gap: var(--rx-space-2);
        min-inline-size: 0;
        /* 見出しの段は、開閉のボタンやタッチ操作の大きさ（44px）と同じ高さにそろえる。 */
        min-block-size: 2.75rem;
        margin: 0;
        padding-block: var(--rx-space-1);
        padding-inline: var(--rx-space-1);
        color: var(--rx-heading);
        font-size: var(--rx-section-title);
        font-weight: 400;
        line-height: var(--rx-small-leading);
        overflow-wrap: anywhere;
        /*
          件数はBC2の議論の件数のピル（lists.md）。高さ18px・角丸9px・12pxの通常の太さで、淡い青に青緑の数字。
          2桁で幅21pxになるよう、左右の余白を小さくする。
        */
        & > small {
          display: inline-grid;
          place-items: center;
          min-inline-size: 1.3125rem;
          block-size: 1.125rem;
          padding-inline: 0.3125rem;
          border-radius: var(--rx-radius-pill);
          background: var(--rx-pill-count);
          color: var(--rx-pill-count-text);
          font-size: var(--rx-small);
          font-weight: 400;
          line-height: 1;
          font-variant-numeric: tabular-nums;
        }
        /* 開閉の操作は、見出しの末尾側に置く。開いている時は「たたむ」、たたんだ時は「開く」のアイコンを表示する。 */
        & > .rx-button.toggle {
          margin-inline-start: auto;
          color: var(--rx-muted);
          & > .expand {
            display: none;
          }
        }
      }
      /* 開閉のボタンがある見出しは上下の余白を0にし、ボタンを見出しの段の高さに収める。 */
      &:not([data-collapsed="true"]) > .title:has(> .toggle:not([hidden])) {
        padding-block: 0;
      }
      & > .empty {
        display: none;
        position: relative;
        padding-block: var(--rx-space-4);
        padding-inline: var(--rx-space-4);
        /* 項目を置ける場所は、FileInputのドロップ先と同じ細い破線で、項目と同じ角の形をなぞる。 */
        border: var(--rx-stroke-width) dashed var(--rx-control-border);
        border-radius: var(--rx-radius-surface);
        color: var(--rx-muted);
        text-align: center;
      }
      & > .items:empty + .empty {
        display: block;
      }
      & > .items {
        min-inline-size: 0;
        & > * + * {
          margin-block-start: var(--rx-space-2);
        }
      }
    }
    /* 破線は受け入れ先を示すので、動かせないBoardの空の列には引かず、文言だけを置く。 */
    &:not([data-movable="true"]) > section > .empty::after {
      display: none;
    }
    /* 受け付けない列は、使えない操作と同じく面をそのままにして、列の名前の文字だけを灰色にする。 */
    & > section[data-disabled="true"] {
      & > .title {
        color: var(--rx-disabled-text);
      }
      /* 破線は受け入れ先を示すので、受け付けない列には引かない。 */
      & > .empty::after {
        display: none;
      }
    }
    /*
      たたんだ列は、列と同じ淡い灰色の細い帯。件数のピルと縦書きの名前を載せ、開ける列は帯の下に「開く」のアイコンを置く。
      開ける列は帯のどこを押しても開き、ホバーすると輪郭を濃くする。
    */
    & > section[data-collapsed="true"] {
      /* 列が収まらない時も帯の幅を確保する。0にすると、autoのトラックが0まで縮み、帯がはみ出す。 */
      min-inline-size: min-content;
      align-self: start;
      padding-block: 0;
      padding-inline: 0;
      & > .title {
        flex-direction: column;
        align-items: center;
        gap: var(--rx-space-3);
        inline-size: 2.75rem;
        min-block-size: 12rem;
        padding-block: var(--rx-space-2);
        padding-inline: 0;
        font-size: var(--rx-body);
        line-height: var(--rx-leading);
        /* 名前を伸ばして、開く操作を帯の下端へ送る（Buttonの余白は動かさない）。 */
        & > .label {
          flex: 1 1 auto;
          writing-mode: vertical-rl;
        }
        /* 件数は帯の上に置く。 */
        & > small {
          order: -1;
        }
        & > .rx-button.toggle {
          margin-inline-start: 0;
          & > .expand {
            display: block;
          }
          & > .collapse {
            display: none;
          }
        }
      }
      &:has(> .title > .toggle:not([hidden])) {
        cursor: pointer;
        &:hover {
          border-color: var(--rx-control-border);
        }
      }
      & > :is(.items, .empty) {
        display: none;
      }
    }
    & > section[data-over="true"] {
      background-color: var(--rx-cover);
      outline: var(--rx-frame-width) dashed var(--rx-link);
      outline-offset: calc(var(--rx-frame-width) * -1);
    }
    /* ドラッグ中の挿入位置。項目は元の場所に跡として残し、移動先には青緑の平らな線だけを出す。 */
    & > section > .items > .drop-marker {
      block-size: 0.1875rem;
      border-radius: var(--rx-radius-mark);
      background: var(--rx-link);
    }
    /*
      ドラッグ中の項目。項目そのもののコピーを傾けずに影で持ち上げ、
      下に出る挿入位置の線が見えるよう半透明にする。
      位置はポインターの位置から決めるので、書字方向にかかわらず左上を基準にする（コピーの中身は元の書字方向のまま）。
    */
    & > .drag-preview {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      direction: ltr;
      z-index: 100;
      pointer-events: none;
      opacity: 0.8;
      & > * {
        box-shadow: var(--rx-shadow-paper-lift);
      }
    }
    @container rx-board (inline-size < 36rem) {
      & > section {
        grid-column: 1 / -1;
        min-inline-size: 0;
      }
      /* 狭い場所では、横長の帯にし、件数・名前・「開く」を一行に並べる。 */
      & > section[data-collapsed="true"] {
        justify-self: start;
      }
      & > section[data-collapsed="true"] > .title {
        flex-direction: row;
        inline-size: fit-content;
        min-block-size: 0;
        padding-block: var(--rx-space-1);
        padding-inline: var(--rx-space-2) var(--rx-space-4);
        &:has(> .toggle:not([hidden])) {
          padding-inline-end: var(--rx-space-1);
        }
        & > .label {
          flex: 0 1 auto;
          writing-mode: horizontal-tb;
        }
      }
    }
  }
  @media (forced-colors: active) {
    .rx-board > section > .empty {
      border: var(--rx-stroke-width) dashed CanvasText;
    }
    .rx-board > section > .items > .drop-marker {
      forced-color-adjust: none;
      background: Highlight;
      box-shadow: none;
    }
    .rx-board > .drag-preview > * {
      border: var(--rx-stroke-width) solid CanvasText;
      background: Canvas;
      box-shadow: none;
    }
  }
}