/* 進み具合の円の割合。未指定でも0として塗れるよう、数値として登録する。 */
@property --rx-task-progress {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@layer components {
  /*
    やることの一覧。実測: lists.md「BC2 To-do（一覧の中の行）」。
    - 行の間隔25px、罫線なし。チェックボックスはOSの標準の部品のまま。題名は15pxの黒、太さ400。チェックとの間7px。
    - 担当者と期日（detail）は題名の後ろに続ける灰色のピル（高さ18px・角丸9px・12px）。
    - 「Add a to-do」は青緑の15pxの文字で、題名の書き始めにそろえる。
    外側の見出しの進み具合の円は手本に無い（推測）。
    終えた項目: 実測 basecamp2-thirdparty/bc2-archived-project-todolist-getapp-2014.png (110, 240, 780, 570)。1倍。
    - 一覧の中で終えた項目は、未完了の行（約15px）より一段小さい文字（約12px）で、題名も補足も #999999。取り消し線は引かない。
    - 補足「(Completed by … on 17 Nov)」はピルにせず、題名に続けて同じ灰色の文字で書く。
    - 実測 #999999 → #737373（白地とホバーの淡い黄色の上で4.5:1に届かないため、色合いを保って暗くした）。Retrixの段では --rx-label（12px）に当てる。
  */
  .rx-task-list {
    --rx-task-progress: 0;
    container: rx-task-list / inline-size;
    display: grid;
    gap: var(--rx-space-3);
    color: var(--rx-text);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    /* 外側の見出し。進み具合は円を終えた割合だけ塗り、全て終えると緑の円に白いチェックを置く。 */
    & > summary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--rx-space-2);
      inline-size: fit-content;
      max-inline-size: 100%;
      cursor: pointer;
      list-style: none;
      &::-webkit-details-marker {
        display: none;
      }
      &:focus-visible {
        outline: 0.125rem solid var(--rx-link);
        outline-offset: 0.125rem;
        border-radius: var(--rx-radius-mark);
      }
      & > .marker {
        display: grid;
        place-items: center;
        color: var(--rx-muted);
        & > .rx-icon {
          font-size: 0.75rem;
        }
      }
      & > .name {
        font-weight: 600;
      }
      & > .pie {
        display: grid;
        place-items: center;
        inline-size: 1rem;
        block-size: 1rem;
        margin-inline-start: var(--rx-space-1);
        border-radius: 50%;
        background: conic-gradient(
          var(--rx-success) calc(var(--rx-task-progress) * 1turn),
          color-mix(in srgb, var(--rx-success) 16%, var(--rx-surface)) 0
        );
      }
      & > .count {
        margin-inline-start: calc(var(--rx-space-1) * -1);
        color: var(--rx-muted);
        font-size: var(--rx-small);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
    }
    &[data-complete="true"] > summary {
      & > .pie::before {
        content: "";
        inline-size: 0.625rem;
        block-size: 0.625rem;
        background: var(--rx-surface);
        mask: url("../assets/check-bold.svg") center / contain no-repeat;
      }
      & > .count {
        color: var(--rx-success);
      }
    }
    &:not([open]) > summary > .marker {
      rotate: -90deg;
    }
    &:not([open]):dir(rtl) > summary > .marker {
      rotate: 90deg;
    }
    /* 行の一覧。枠で囲まず、罫線も引かずに行を詰めて並べる。 */
    & > .sheet {
      min-inline-size: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      & > li {
        /* 末尾の内容（件数のピル・担当者など）は、BC2のピルと同じく題名のすぐ後ろ（6〜7px右）に置く。 */
        display: grid;
        grid-template-columns: minmax(0, max-content) auto;
        justify-content: start;
        align-items: center;
        column-gap: 0.375rem;
        min-inline-size: 0;
        /* この一覧の名前は、最初の行の上に15pxの太字で書く（BC2のリスト名の大きさ。リンクではないので黒にする）。 */
        &.heading {
          display: block;
          padding-block: 0 var(--rx-space-1);
          & > .title {
            margin: 0;
            font-size: var(--rx-body);
            font-weight: 600;
            line-height: var(--rx-label-leading);
          }
        }
        /* 行にホバーすると、DataListと同じ淡い黄色の面を行の幅いっぱいに出す。行のどこを押してもチェックが変わる。 */
        &:not(.heading, .add):has(> .rx-choice > input:enabled):hover {
          background: color-mix(in srgb, var(--rx-mark) 50%, var(--rx-surface));
        }
        /*
          追加する欄は、Basecamp 2の「Add a to-do」のように青緑の文字で書き、チェックの列に追加のアイコンを置く。
          手本の下線はプレースホルダーに引けない（::placeholderはtext-decorationを描かない）ので付けない。
          入力中はアイコンを青緑の丸にし、行を淡い青緑の面にする。
        */
        &.add {
          grid-template-columns: calc(10em / 7) minmax(0, 1fr);
          column-gap: 0.5em;
          padding-block: 0;
          color: var(--rx-link);
          font-size: var(--rx-body);
          & > .plus {
            display: grid;
            place-items: center;
            justify-self: center;
            inline-size: calc(10em / 7);
            block-size: calc(10em / 7);
            border-radius: 50%;
          }
          &:focus-within {
            background: var(--rx-cover);
          }
          &:focus-within > .plus {
            background: var(--rx-teal);
            color: var(--rx-surface);
          }
          & > .entry {
            min-inline-size: 0;
            min-block-size: calc(25em / 15);
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--rx-text);
            font: inherit;
            &::placeholder {
              color: var(--rx-link);
              opacity: 1;
            }
            /* 入力中は、欄を四角で囲まず、青緑の丸のアイコンと行の淡い青緑の面で示す。 */
            &:focus-visible {
              outline: 0;
            }
          }
        }
        & > .end {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 0.25rem;
          color: var(--rx-muted);
          font-size: var(--rx-small);
        }
        /* 項目の題名は15px。行の高さ21.4pxに上下2pxずつ足して、行の間隔を25pxにする。 */
        & > .rx-choice {
          padding-block: 0.125rem;
          font-size: var(--rx-body);
          & > span {
            min-inline-size: 0;
            overflow-wrap: anywhere;
          }
          /* 題名は通常の太さの黒。 */
          & > span > strong {
            display: inline;
            color: var(--rx-ink);
            font-weight: 400;
          }
          /* 担当者と期日は、題名の後ろに続ける灰色のピル（#eeeeee の地に灰色の12px。実測の文字 #777 は4.5:1に届かないので --rx-pill-meta-text）。 */
          & > span > small {
            display: inline-block;
            margin-block-start: 0;
            margin-inline-start: 0.375rem;
            padding-inline: 0.5625rem;
            border-radius: var(--rx-radius-pill);
            background: var(--rx-pill-meta);
            color: var(--rx-pill-meta-text);
            font-size: var(--rx-small);
            line-height: 1.125rem;
            vertical-align: 0.0625rem;
          }
          /* 終えた項目は一段小さい灰色の文字にし、補足もピルを外して同じ灰色で続ける。 */
          & > input:checked + span {
            --rx-task-done: #737373;
            font-size: var(--rx-label);
            & > strong {
              color: var(--rx-task-done);
            }
            & > small {
              padding-inline: 0;
              background: none;
              color: var(--rx-task-done);
            }
          }
        }
      }
    }
  }
  @container rx-task-list (inline-size < 26rem) {
    .rx-task-list > .sheet > li:not(.heading, .add) {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      & > .end {
        padding-inline-start: calc(var(--rx-body) * 10 / 7 + var(--rx-body) / 2);
        padding-block-end: var(--rx-space-1);
      }
    }
  }
  @media (pointer: coarse) {
    .rx-task-list > .sheet > li > .rx-choice {
      min-block-size: 2.75rem;
    }
  }
  @media (forced-colors: active) {
    .rx-task-list > .sheet > li.add:focus-within {
      outline: 0.125rem solid Highlight;
      outline-offset: -0.125rem;
    }
    .rx-task-list > .sheet > li > .rx-choice > span > small {
      border: var(--rx-stroke-width) solid CanvasText;
    }
    .rx-task-list > summary > .pie {
      border: var(--rx-stroke-width) solid CanvasText;
    }
  }
}