@layer components {
  .rx-board-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--rx-space-2) var(--rx-space-1);
    min-inline-size: 0;
    /* 題名・補足・バッジの段の間（4〜8px）より、カードの上下の余白をはっきり広くする。 */
    padding-block: var(--rx-space-3);
    padding-inline: var(--rx-space-3) var(--rx-space-2);
    /*
      BC2のプロジェクトのカード（structure.md）と同じ、白く枠のないカードに四方の短いぼかし影と角丸3px。
      列の色では染めない。
    */
    border-radius: var(--rx-radius-surface);
    background: var(--rx-surface);
    box-shadow: var(--rx-shadow-paper);
    color: var(--rx-text);
    /* 動かせる項目にホバーすると、影を少し広げて持ち上げる（推測。手本にホバーの画像は無い）。 */
    &:not([data-disabled="true"]):hover {
      box-shadow: var(--rx-shadow-paper-lift);
    }
    /*
      中身は項目のグリッドに直接並べる。右上のハンドルの隣は一行目（題名）だけにし、
      二つ目からはハンドルの下まで項目の幅いっぱいに使う。
    */
    & > .body {
      display: contents;
      & > * {
        grid-column: 1 / -1;
        min-inline-size: 0;
        overflow-wrap: anywhere;
      }
      /* 題名は一覧の題名と同じ600の太さにし、項目の中でいちばん強くする。補足と日付は一段小さく弱くする。 */
      & > h4 {
        margin: 0;
        font-size: var(--rx-body);
        font-weight: 600;
        line-height: var(--rx-label-leading);
      }
      & > p {
        color: var(--rx-muted);
        font-size: var(--rx-small);
        line-height: var(--rx-small-leading);
      }
    }
    /*
      番号などの小さな文字。カードの上の先頭側に、列の色の小さな太字で置く。面は塗らない。中立の列では灰色にする。
    */
    & > .code {
      position: absolute;
      inset-block-start: var(--rx-space-2);
      inset-inline-start: var(--rx-space-3);
      color: color-mix(in srgb, var(--rx-lane-accent, var(--rx-muted)) 85%, var(--rx-text));
      font-size: var(--rx-small);
      font-weight: 600;
      line-height: var(--rx-small-leading);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    /* 番号の行（上の余白＋行高）の下に、題名との間を補足の段と同じだけ空ける。 */
    &:has(> .code) {
      padding-block-start: calc(
        var(--rx-space-2) + var(--rx-small) * var(--rx-small-leading) + var(--rx-space-1)
      );
    }
    /* ハンドルがある時は、一行目の文字をハンドルの中央の高さにそろえる。 */
    &:has(> .handle) > .body > :first-child {
      grid-column: 1;
      padding-block-start: 0.375rem;
    }
    & > .rx-button.handle {
      grid-column: 2;
      grid-row: 1;
      color: var(--rx-muted);
      touch-action: none;
      &:not(:disabled) {
        cursor: grab;
      }
      &:not(:disabled):active {
        cursor: grabbing;
      }
      &:disabled {
        cursor: not-allowed;
      }
    }
    /*
      移動中の項目は青い破線で縁取る。キーボードで移動する時は、この項目そのものが列と位置を移るので、
      薄めずに持ち上げた影のまま見せる。
    */
    &[data-moving="true"] {
      outline: var(--rx-frame-width) dashed var(--rx-link);
      outline-offset: calc(var(--rx-frame-width) * -1);
      box-shadow: var(--rx-shadow-paper-lift);
    }
    &[data-moving="true"] > .rx-button.handle:not(:disabled) {
      cursor: grabbing;
    }
  }
  /*
    ドラッグ中はコピーを動かすので、元の項目は移動元の跡として残す。影を消して灰色に薄め、
    置く場所へ一緒に移って、離すとそこに収まることを示す。
  */
  .rx-board-item[data-moving="true"]:is(:root[data-rx-board-dragging="true"] *) {
    box-shadow: none;
    filter: grayscale(1) brightness(0.97);
    opacity: 0.6;
  }
  :root[data-rx-board-dragging="true"],
  :root[data-rx-board-dragging="true"] :is(.rx-button, *, *::before, *::after) {
    cursor: grabbing;
  }
  @media (forced-colors: active) {
    .rx-board-item {
      border: var(--rx-stroke-width) solid CanvasText;
      background: Canvas;
      box-shadow: none;
    }
  }
}