/* 作例（画像 + 項目別のタグの表）。シチュ R18 の recipe.css と RIN Search の examples.css から移した。子テーマへ入れるファイルの正本。
   テーマの CSS は層の外にあるので、層を使わず .post_content を付けて詳細度で勝つ。
   タグは button にする（code にすると子テーマの .post_content :not(pre) > code のコピーと吹き出しが重なる） */
.post_content .rin-example {
  --_accent: var(--color_main, #9c4930);
  --_bg: var(--color_bg, #fff8e7);
  --_text: var(--color_text, #4f2e2e);
  --_surface: #fff;
  --_line: color-mix(in oklch, var(--_bg), var(--_accent) 22%);
  --_muted: color-mix(in oklch, var(--_text), var(--_bg) 28%);
  --_soft: color-mix(in oklch, var(--_bg), var(--_accent) 12%);
  --_ok: oklch(48% 0.14 145);
  --_ng: oklch(48% 0.18 25);

  container: rin-example / inline-size;
  margin-block: 1.5rem 2.5rem;
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  border: 1px solid var(--_line);
  border-radius: 0.75em;
  background-color: var(--_surface);
  scroll-margin-block-start: 5rem;

  /* 記事のカード（loos/column）の中では、列の枠（is-style-clmn-shadow）がカードの枠になる */
  .swell-block-column > & {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* 指で操作する端末だけ、画面の外の作例の描画を後回しにする（シチュ R18 と同じ） */
  @media (pointer: coarse) and (not (any-pointer: fine)) {
    @supports (overflow-clip-margin: 1rem) {
      content-visibility: auto;
      contain-intrinsic-block-size: auto 50rem;
      overflow-clip-margin: 1rem;
    }
  }

  .rin-example__body {
    display: grid;
    gap: 1rem;

    @container rin-example (inline-size >= 40rem) {
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      align-items: start;
      gap: 1.25rem;
    }
  }

  .rin-example__note {
    margin-block: 0.75rem 0;
  }

  .rin-example__shot {
    justify-self: center;
    inline-size: min(100%, 26rem);
    margin: 0;

    img {
      display: block;
      inline-size: 100%;
      block-size: auto;
      border-radius: 0.375em;
    }

    @container rin-example (inline-size >= 40rem) {
      position: sticky;
      inset-block-start: 5rem;
      inline-size: 100%;
    }
  }

  .rin-example__sheet {
    container: rin-example-sheet / inline-size;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: start;
    gap: 0.75rem;
    min-inline-size: 0;

    /* 横並びでは、表の高さによらず下の列（開くボタンとリンク）を画像の下端に置く */
    @container rin-example (inline-size >= 40rem) {
      align-self: stretch;
    }
  }

  .rin-example__foot {
    display: flex;
    flex-wrap: wrap;
    justify-self: stretch;
    align-items: center;
    gap: 0.5rem 1rem;
  }

  .rin-example__more {
    margin-inline-start: auto;
    color: var(--_accent);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-decoration: underline;

    &:focus-visible {
      outline: 2px solid var(--_accent);
      outline-offset: 2px;
    }
  }

  .rin-example__clip {
    justify-self: stretch;
    min-inline-size: 0;
  }

  /* JS が動くときだけ畳む（開くボタンが動かないと、隠したタグを読めない）。
     縦並びは決まった高さ。横並びは表の高さを行の高さに数えさせず（contain: size）、行の高さ = 画像の高さ、ボタンの下端 = 画像の下端にする。
     padding と負の margin は、フォーカスの枠を切らないため */
  @media (scripting: enabled) {
    .rin-example__clip:has(> [data-folded]) {
      overflow: clip;
      max-block-size: 20rem;
      margin: -0.25rem;
      padding: 0.25rem;
      mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent);
    }

    @container rin-example (inline-size >= 40rem) {
      .rin-example__clip:has(> [data-folded]) {
        contain: size;
        max-block-size: none;
      }
    }
  }

  @media (scripting: none) {
    .rin-example__fold {
      display: none;
    }
  }

  /* コピーのボタン。押す前・コピーしました・コピー失敗の 3 組を同じマスに重ね、押しても幅が動かないようにする */
  .rin-example__copy {
    --_btn-bg: var(--_soft);
    --_btn-fg: var(--_accent);

    position: relative;
    display: inline-grid;
    align-items: center;
    min-block-size: 1.5rem;
    margin: 0;
    padding: 0.15em 0.6em;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: var(--_btn-bg);
    color: var(--_btn-fg);
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;

    > span {
      grid-area: 1 / 1;
      justify-self: center;
    }

    > :not(.is-idle) {
      visibility: hidden;
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        --_btn-bg: color-mix(in oklch, var(--_bg), var(--_accent) 22%);
      }
    }

    &:active {
      --_btn-bg: color-mix(in oklch, var(--_bg), var(--_accent) 22%);
    }

    &:focus-visible {
      outline: 2px solid var(--_accent);
      outline-offset: 2px;
    }

    &:is([data-copied], [data-failed]) > .is-idle {
      visibility: hidden;
    }

    &[data-copied] {
      --_btn-bg: var(--_ok);
      --_btn-fg: #fff;

      > .is-done {
        visibility: visible;
      }
    }

    &[data-failed] {
      --_btn-bg: var(--_ng);
      --_btn-fg: #fff;

      > .is-failed {
        visibility: visible;
      }
    }

    /* 指で押す端末では、見た目を変えずに押せる範囲を広げる */
    @media (pointer: coarse) {
      &::before {
        content: "";
        position: absolute;
        inset: -0.35rem -0.25rem;
      }
    }
  }

  .rin-example__tags {
    display: table;
    inline-size: 100%;
    margin: 0;
    table-layout: auto;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: none;
    font-size: 0.9375rem;
    line-height: 1.5;

    .col-group {
      inline-size: 7.5em;
    }

    /* 広い幅でも、タグの列は中身の幅に留めて、日本語名を隣に寄せる */
    .tag-head,
    .tag {
      inline-size: 1%;
      padding-inline-end: 1em;
      white-space: nowrap;
    }

    th,
    td {
      border: 0;
      background: none;
    }

    thead th {
      padding: 0 0.5em 0.35em 0;
      color: var(--_muted);
      font-size: 0.75rem;
      font-weight: normal;
      text-align: start;
    }

    .tag-head .rin-example__copy {
      margin-inline-start: 0.5em;
    }

    .group {
      padding: 0.35em 0.6em 0.35em 0;
      color: var(--_accent);
      font-size: 0.8125rem;
      font-weight: bolder;
      text-align: start;
      vertical-align: top;

      .rin-example__copy {
        display: grid;
        margin-block-start: 0.4em;
      }
    }

    tbody + tbody tr:first-child > * {
      border-block-start: 1px solid var(--_line);
    }

    td {
      padding: 0.2em 0.5em 0.2em 0;
      vertical-align: baseline;
    }

    tbody tr:first-child td {
      padding-block-start: 0.4em;
    }

    tbody tr:last-child td {
      padding-block-end: 0.4em;
    }

    .ja {
      color: var(--_text);
    }

    /* タグ 1 つ。枠付きの四角い札で、薄い地の丸いコピーのボタンと見分ける */
    .rin-example__tag {
      --_tag-bg: var(--_bg);
      --_tag-fg: var(--_text);

      position: relative;
      display: inline-block;
      margin: 0;
      padding: 0.15em 0.6em;
      border: 1px solid var(--_accent);
      border-radius: 0.1em;
      background-color: var(--_tag-bg);
      color: var(--_tag-fg);
      font-size: 0.875rem;
      line-height: 1.5;
      text-align: start;
      overflow-wrap: anywhere;
      cursor: pointer;
      transition-property: background-color, color;
      transition-duration: 0.2s;

      &::after {
        position: absolute;
        inset-block-end: calc(100% + 0.2em);
        inset-inline-start: 50%;
        z-index: 1;
        padding: 0.1em 0.4em;
        border: 1px solid var(--_line);
        border-radius: 0.375em;
        background-color: var(--_surface);
        box-shadow: 0 0.125em 0.375em oklch(30% 0.03 50 / 18%);
        color: var(--_accent);
        font-size: 0.75rem;
        white-space: nowrap;
        translate: -50% 0;
        pointer-events: none;
      }

      &:focus-visible {
        --_tag-bg: var(--_accent);
        --_tag-fg: var(--_bg);

        outline: 2px solid var(--_accent);
        outline-offset: 2px;
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          --_tag-bg: var(--_accent);
          --_tag-fg: var(--_bg);

          &::after {
            content: "📋クリックでコピー";
          }
        }
      }

      &[data-copied]::after {
        content: "✅コピーしました！";
        color: var(--_ok);
        font-weight: bolder;
      }

      &[data-failed]::after {
        content: "コピーできませんでした";
        color: var(--_ng);
      }
    }

    /* すべて・まとめてコピーの範囲を反転して示す。写したあとも data-copied のあいだ反転する */
    &:has(.tag-head .rin-example__copy:is(:focus-visible, [data-copied]):not([data-failed])) .rin-example__tag,
    tbody:has(.group .rin-example__copy:is(:focus-visible, [data-copied]):not([data-failed])) .rin-example__tag {
      --_tag-bg: var(--_accent);
      --_tag-fg: var(--_bg);
    }

    @media (hover: hover) and (pointer: fine) {
      &:has(.tag-head .rin-example__copy:hover:not([data-failed])) .rin-example__tag,
      tbody:has(.group .rin-example__copy:hover:not([data-failed])) .rin-example__tag {
        --_tag-bg: var(--_accent);
        --_tag-fg: var(--_bg);
      }

      tr:has(.rin-example__tag:hover) .ja {
        font-weight: bolder;
      }
    }

    /* 狭い幅では項目の列をなくし、項目名を横いっぱいの見出しにして、その下にタグと日本語名を並べる */
    @container rin-example-sheet (inline-size < 26rem) {
      display: grid;
      /* タグの列は一番長いタグの幅にして、日本語名を隣に寄せる。長いタグは 6 割で折り返す */
      grid-template-columns: fit-content(60%) minmax(0, 1fr);
      column-gap: 1em;

      colgroup,
      thead th:first-child {
        display: none;
      }

      thead,
      tbody {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: baseline;
      }

      tr {
        display: contents;
      }

      .group {
        display: flex;
        grid-column: 1 / -1;
        align-items: center;
        gap: 0.75em;
        padding-block: 0.6em 0.2em;

        .rin-example__copy {
          margin-block-start: 0;
        }
      }

      td {
        padding-inline-end: 0;
      }

      .rin-example__tag {
        display: inline-flex;
      }

      tbody + tbody tr:first-child > td {
        border-block-start: none;
      }

      .ja {
        word-break: auto-phrase;
      }
    }
  }

  .rin-example__fold {
    margin: 0;
    padding: 0.35em 1em;
    border: 1px solid var(--_accent);
    border-radius: 999px;
    background: none;
    color: var(--_accent);
    font-size: 0.8125rem;
    line-height: 1.5;
    cursor: pointer;
    scroll-margin-block: 5rem;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background-color: var(--_soft);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--_accent);
      outline-offset: 2px;
    }
  }
}