@layer components {
  .rx-card {
    container: rx-card / inline-size;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    /*
      実測: structure.md「BC2 のプロジェクトのカード」。白、枠なし、四方に4〜5pxのぼかし影、角丸3px、内側の余白16px。
      影はシートより短い紙の影（--rx-shadow-paper）にする。
    */
    padding-block: var(--rx-space-4);
    padding-inline: var(--rx-space-4);
    border: 0;
    border-radius: var(--rx-radius-surface);
    background: var(--rx-surface) var(--rx-fill-paper);
    color: var(--rx-text);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    overflow-wrap: anywhere;
    box-shadow: var(--rx-shadow-paper);
    /* ホバーの見た目は手本に無い（推測）。リンクの題名にホバーした時だけ、影を少し遠くまで落とす。 */
    &:has(> .title > a:hover) {
      box-shadow: var(--rx-shadow-paper-lift);
    }
    & > .preview {
      overflow: hidden;
      border-radius: var(--rx-radius-surface);
      & + :is(.title, .eyebrow) {
        margin-block-start: var(--rx-space-4);
      }
      & > :is(img, svg:not(.rx-icon)) {
        display: block;
        inline-size: 100%;
        block-size: auto;
      }
    }
    /* 種類・分類の小さな補足は、字間を空けた小さな灰色の文字にする。 */
    & > .eyebrow {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--rx-space-2);
      color: var(--rx-muted);
      font-size: var(--rx-small);
      line-height: var(--rx-small-leading);
      letter-spacing: 0.04em;
      & + .title {
        margin-block-start: var(--rx-space-1);
      }
    }
    /*
      実測: プロジェクトのカードのタイトルは20pxの太字の黒（行の高さ20px）。日本語の折り返しで行が重ならないよう、行の高さだけ1.25にする（推測）。
      リンクの題名も普段は黒い太字のまま置き、ホバーした時だけ赤茶の文字と下線でリンクだと示す（ホバーは推測）。
    */
    & > .title {
      color: var(--rx-ink);
      font-size: var(--rx-title);
      font-weight: 700;
      line-height: 1.25;
      word-break: auto-phrase;
      & > a {
        color: inherit;
        text-decoration-line: none;
        &:hover {
          color: var(--rx-link-hover);
          text-decoration-line: underline;
        }
      }
    }
    /*
      実測: カードの説明は16px前後のカーキ（#aa9c84）、行の高さ19〜20px。白地で4.5:1に届かないので、同じ色合いの茶色（--rx-meta）にする。
      中に置いたBadge・ボタン・リンクは、それぞれの色を持つ。
    */
    & > .body {
      color: var(--rx-meta);
      font-size: var(--rx-reading);
      /* 14pxの文字で行高20px（整数px）。 */
      line-height: calc(20 / 14);
    }
    & > .body:not(:empty) {
      margin-block-start: var(--rx-space-1);
    }
    /* 段落の間はカードの余白よりはっきり狭くする。行の余りと合わせて、段落の切れ目だけが分かる幅にする。 */
    & > .body > * + * {
      margin-block-start: var(--rx-space-2);
    }
    & > .meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: start;
      gap: var(--rx-space-1) var(--rx-space-2);
      margin-block-start: auto;
      /* 実測: 「Last updated …」は11〜12pxのカーキ。本文のすぐ下に添え、本文との間はカードの余白より狭くする。 */
      padding-block-start: var(--rx-space-2);
      color: var(--rx-meta);
      font-size: var(--rx-small);
      line-height: var(--rx-small-leading);
      /* 並べたメタ情報は、茶色の小さな文字を点で区切る（「田中 遥 · 9月15日」）。操作の前には点を置かない。 */
      & > :not(.end, .rx-input, .rx-button) + :not(.end, .rx-input, .rx-button)::before {
        content: "·";
        margin-inline-end: var(--rx-space-2);
      }
      & > .end {
        margin-inline-start: auto;
      }
      & > .rx-input {
        inline-size: auto;
        max-inline-size: calc(100% - 3rem);
      }
    }
    /* 詰めた密度は推測。余白を12pxにし、題名を一覧の題名と同じ大きさにする。 */
    &[data-density="compact"] {
      padding-block: var(--rx-space-3);
      padding-inline: var(--rx-space-3);
      & > .title {
        font-size: var(--rx-body);
      }
      & > .meta {
        padding-block-start: var(--rx-space-1);
      }
    }
    /* 完了は縁取りではなく、淡い成功の色の背景で示す（推測）。 */
    &[data-state="complete"] {
      background: color-mix(in srgb, var(--rx-success-soft) 60%, var(--rx-surface));
    }
  }
  @media (forced-colors: active) {
    .rx-card {
      border: var(--rx-stroke-width) solid CanvasText;
      background: Canvas;
      box-shadow: none;
    }
  }
}