@layer components {
  /*
    本文のそばに置く「ここを見て」の案内。実測: overlays.md「4a. 黄色の案内の箱（BC2）」。
    - 塗り #ffffcc、枠 1px #eac73b で下だけ3px、角丸4px。字は黒の13px、1行目（題名）は太字、2行目（本文）は標準の太さ。
    - 下だけ3pxの枠は、片側の線と角丸を組み合わせないよう、全周の1pxの枠に下へ2pxずらした同じ色の影を重ねて描く。
    手本は中央寄せだが、アイコンや操作を並べ、長い文も置くので、書き始めの側にそろえる（推測）。
    基本（info）と注意（warning）は同じ黄色の箱。成功と危険は、同じ形のまま役割の色の淡い面と枠にし、アイコンと題名を役割の色で書く（推測）。
  */
  .rx-notice {
    --rx-notice-accent: var(--rx-ink);
    --rx-notice-icon: var(--rx-info);
    --rx-notice-face: var(--rx-mark);
    --rx-notice-edge: #eac73b;
    display: grid;
    /* 列はカードの幅に収め、長い題名やURLでも中身の最小幅でカードを押し広げない。 */
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    min-inline-size: 0;
    padding-block: var(--rx-space-3);
    padding-inline: var(--rx-space-4);
    border: var(--rx-stroke-width) solid var(--rx-notice-edge);
    border-radius: 0.25rem;
    background: var(--rx-notice-face);
    box-shadow: 0 calc(2 * var(--rx-stroke-width)) 0 var(--rx-notice-edge);
    color: var(--rx-text);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    overflow-wrap: anywhere;
    /* 日本語は文節の切れ目で折り返し、行末に一、二文字だけを残さない。 */
    word-break: auto-phrase;
    /*
      アイコンと題名。アイコンの枠は題名の一行の高さにそろえて上揃えにし、題名が折り返してもアイコンは一行目の横に置く。
    */
    & > .heading {
      display: flex;
      align-items: start;
      /* アイコンと題名は一つの塊として読ませるので、Toastのアイコンと文と同じく詰める。 */
      gap: 0.375rem;
      max-inline-size: 100%;
      color: var(--rx-notice-accent);
      font-size: var(--rx-label);
      line-height: var(--rx-label-leading);
      & > .symbol {
        display: grid;
        flex: none;
        place-items: center;
        block-size: 1lh;
        color: var(--rx-notice-icon);
        & > .rx-icon {
          font-size: 1rem;
        }
      }
      & > .title {
        min-inline-size: 0;
        margin: 0;
        color: inherit;
        font-size: inherit;
        font-weight: 700;
        line-height: inherit;
      }
    }
    & > .body {
      justify-self: stretch;
      min-inline-size: 0;
      margin-block-start: var(--rx-space-1);
      & > * + * {
        margin-block-start: var(--rx-space-2);
      }
      &:empty {
        display: none;
      }
    }
    /* 題名だけの時は本文の段を持たない。題名のない時は本文を一行目から書く。 */
    & > .body:first-child {
      margin-block-start: 0;
    }
    &[data-tone="warning"] {
      --rx-notice-icon: var(--rx-warning);
    }
    &[data-tone="success"] {
      --rx-notice-face: var(--rx-success-soft);
      --rx-notice-edge: color-mix(in srgb, var(--rx-success) 40%, var(--rx-surface));
      --rx-notice-accent: var(--rx-green-dark);
      --rx-notice-icon: var(--rx-success);
    }
    &[data-tone="danger"] {
      --rx-notice-face: var(--rx-danger-soft);
      --rx-notice-edge: color-mix(in srgb, var(--rx-danger) 40%, var(--rx-surface));
      --rx-notice-accent: var(--rx-danger);
      --rx-notice-icon: var(--rx-danger);
    }
  }
  @media (forced-colors: active) {
    .rx-notice {
      border-color: CanvasText;
      background: Canvas;
      box-shadow: none;
    }
  }
}