/* S5 やること・W7 期限・W8 繰り返し（担当D）。値は tokens.css の変数だけを使う（直書きしない）。
   行は iOS の inset grouped（kit.css の .group と .row）。丸の的（48px）と行の的の間を 8px 空ける（ui-design 16-4.6）。 */

.todo-switch { margin: 0 0 var(--sp-4); }
.todo-switch .seg-item { font-variant-numeric: tabular-nums; }
.todo-list { display: flex; flex-direction: column; }

/* ---------- 行: 左の丸（押すと済み）と、行の的の間を 8px 空ける ---------- */
.todo-row .row-lead { margin-right: var(--hit-gap); background: var(--surface); }
.todo-row .row-lead:active { background: var(--press); }
.todo-row .row-main { padding-left: var(--sp-1); }
.group .todo-row + .todo-row::after { left: calc(var(--hit) + var(--hit-gap) + var(--sp-1)); }
:root[data-list-style="plain"] .todo-row .row-lead { background: var(--bg); }

.todo-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  color: var(--on-accent);
  transition: background-color var(--dur-1) linear;
}
.todo-circle.is-done { background: var(--accent-fill); box-shadow: none; }
.todo-row.is-done .row-title { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); }

/* グループの色の印は、丸より左の端に出す（kit の行の中の線の代わり） */
.todo-row.has-mark .row-main::before { display: none; }
.todo-row.has-mark::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: var(--sp-1);
  top: var(--sp-3);
  bottom: var(--sp-3);
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--mark, var(--g-none));
}
:root[data-group-mark="dot"] .todo-row.has-mark::before { width: 8px; height: 8px; bottom: auto; top: 20px; left: 2px; }
:root[data-group-mark="none"] .todo-row.has-mark::before { display: none; }

/* 2行目: 期限・繰り返し・進み具合（言葉と数で。色だけで伝えない） */
.todo-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); font-variant-numeric: tabular-nums; }
.todo-due, .todo-repeat { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--text-2); }
.todo-meta-icon { display: inline-flex; color: var(--text-3); }
.todo-due.is-today, .todo-due.is-over { font-weight: var(--fw-bold); color: var(--text); }
.todo-progress { color: var(--text-2); }
.todo-doneat { color: var(--text-3); }

/* 済み（N件）の見出し（押すと畳む・開く） */
.todo-done-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--hit-min);
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  text-align: left;
}
.todo-done-head:active { background: var(--press-bg); }
.todo-done-chev { display: inline-flex; transition: transform var(--dur-1) linear; }
.todo-done-chev.is-open { transform: rotate(90deg); }
.todo-done-hint { margin-left: auto; color: var(--accent); }

/* ---------- W7 期限 ---------- */
.due-now { margin: 0; text-align: center; font-size: var(--fs-headline); font-weight: var(--fw-bold); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
.due-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5em, 1fr)); gap: var(--hit-gap); font-size: var(--fs-body); }
.due-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--hit);
  padding: var(--sp-1) var(--sp-2);
  border: 0;
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
}
.due-pick:active { background: var(--press); }
.due-pick.is-on { box-shadow: inset 0 0 0 2px var(--accent); font-weight: var(--fw-bold); }
.due-pick-label { display: inline-flex; align-items: center; gap: 2px; }
.due-pick-check { display: inline-flex; color: var(--accent); }
.due-pick-sub { color: var(--text-3); font-size: var(--fs-small); font-weight: var(--fw-normal); font-variant-numeric: tabular-nums; }

/* 暦の日: 44px の的を上下左右とも 8px 空けて 7 列（7×44＋6×8＝356px。幅 360px で窓の左右の余白の外まで使う） */
.due-time-input { max-width: 12em; }

.due-repeat {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--cell-h);
  margin-top: var(--sp-2);
  padding: var(--row-pad) var(--cell-x);
  border: 0;
  border-radius: var(--r-group);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  line-height: var(--lh-ui);
}
.due-repeat:active { background: var(--press); }
.due-repeat-value { flex: 1; text-align: right; color: var(--text-3); }
.due-repeat-go { display: inline-flex; color: var(--text-3); }

/* ---------- W8 繰り返し ---------- */
.repeat-note { padding: 0 var(--cell-x); }