/* ============================================================
   Playground — 試作場（ToDoサンプルで色を上書きして試す）
   署名色 --brand / --brand-soft / 選択色 --accent を #pgScreen に上書きすると、
   ToDo全体（チェック・息継ぎ線・進捗＝brand／選択フィルタ＝accent／未完了ピル＝
   brand-soft）が一斉に再テーマされる。「署名色はテーマ可能」の実証。配線は js/catalog.js。
   ============================================================ */

/* 上書きコントロール */
.pg-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; max-width: 344px; margin-bottom: 4px; }
.pg-controls label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); letter-spacing: .04em; cursor: pointer; }
.pg-controls input[type="color"] {
  width: 28px; height: 28px; padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius-control); background: none; cursor: pointer;
}
.pg-controls input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.pg-controls input[type="color"]::-webkit-color-swatch { border: none; border-radius: 7px; }
.pg-reset { font-size: 12px; color: var(--cta); font-weight: 700; letter-spacing: .02em; text-decoration: underline; text-underline-offset: 3px; }

/* 選択色＝分類色から選ぶ（自由な色ではなく、色相環10色の見本から一つ） */
.pg-accent { display: inline-flex; align-items: center; gap: 7px; }
.pg-accent-cap { font-size: 12px; color: var(--text-muted); letter-spacing: .04em; margin-right: 1px; }
.pg-swatch {
  width: 22px; height: 22px; border-radius: 50%; padding: 0; flex: none;
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow: 0 0 0 0 var(--bg), 0 0 0 0 var(--text);
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pg-swatch:hover { transform: translateY(-1px); }
.pg-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg-raised), 0 0 0 3.5px var(--text); }

/* ToDo 本体 */
.pg-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-bar-row { display: flex; align-items: center; gap: 12px; }
.pg-bar-row .bar { flex: 1; }
.pg-count { font-family: var(--font-serif); font-feature-settings: "tnum"; font-size: 13px; color: var(--text); white-space: nowrap; }
/* 未完了ピル＝brand-soft（上書きが効く位置） */
.pg-soft {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  color: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand-soft) 45%, var(--line));
  border-radius: var(--radius-pill); padding: 2px 10px;
}

.pg-tasks { display: flex; flex-direction: column; }
.pg-task { cursor: pointer; }
.pg-task .pg-tx { flex: 1; font-size: 14px; color: var(--text); transition: color var(--dur-fast) var(--ease); }
.pg-task .tag { margin-left: auto; flex: none; }
.pg-task[aria-checked="true"] .pg-tx { color: var(--text-muted); text-decoration: line-through; }