/* S9 タグを整える・W1 いつものタグで書く・W2 タグを付ける（担当C）。値は tokens.css の変数だけを使う（直書きしない）。
   行は iOS の inset grouped（kit.css の .group と .row）。区別の色は〔線／点／淡い地〕だけに使い、字は主の字（ui-design 16-6.8）。 */

/* ---------- 共通 ---------- */
.tg-dot {
  flex: none;
  width: var(--sp-3);
  height: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--mark, var(--g-none));
  box-shadow: inset 0 0 0 1px var(--line);
}
.tg-note { margin: 0; padding: 0 var(--cell-x); color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.tg-add { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--accent); font-weight: var(--fw-bold); }
.tg-add-icon { display: inline-flex; }
.tg-name { padding-top: var(--sp-2); }

/* ---------- S9 タグを整える ---------- */
.tg-search { padding: var(--sp-2) 0 var(--sp-1); }
.tg-status .statusline { padding-left: 0; }
.tg-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.tg-list > .group, .tg-sec .group { margin-bottom: 0; }
.tg-list .tg-create { margin-bottom: var(--sp-2); }
.tg-sec { display: flex; flex-direction: column; border-radius: var(--r-group); margin-bottom: var(--sp-3); }
/* グループの見出し（色の点・名前・件数）。押せる見出しは右に › を付けて、押せることを形で示す（16-4.5） */
.tg-sec-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--hit-min);
  margin: 0;
  padding: 0 var(--cell-x);
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-normal);
  line-height: var(--lh-ui);
  text-align: left;
}
button.tg-sec-head:active { background: var(--press-bg); }
.tg-sec-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tg-sec-count { color: var(--text-3); font-variant-numeric: tabular-nums; }
.tg-sec-chev { display: inline-flex; color: var(--text-3); }
.tg-empty { margin: 0; padding: var(--sp-3) var(--cell-x); color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }

/* タグの行: 名前（主役）と右の件数 */
.tg-row .row-title { display: block; -webkit-line-clamp: unset; }
.tg-row-title { display: flex; align-items: baseline; gap: var(--sp-3); }
.tg-row-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tg-count { flex: none; color: var(--text-3); font-size: var(--fs-small); font-weight: var(--fw-normal); font-variant-numeric: tabular-nums; }
.tg-row .row-main { -webkit-touch-callout: none; }
.tg-row.is-flash .row-main { background: var(--press); transition: background-color var(--dur-2) linear; }

/* 長押しして引っぱる */
.tg-row.is-lifted .row-main { background: var(--press); opacity: 0.5; }
.tg-list.is-dragging { -webkit-user-select: none; user-select: none; }
.tg-list.is-dragging .tg-sec { transition: box-shadow var(--dur-1) linear; }
.tg-sec.is-drop { box-shadow: 0 0 0 2px var(--accent); }
.tg-sec.is-drop .tg-sec-head { color: var(--text); font-weight: var(--fw-bold); }
.tg-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 70vw;
  min-height: var(--hit-min);
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--soft, var(--surface));
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line-strong);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* タグ・グループの窓 */
.tg-sheet-note { margin: 0; color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); text-align: center; }
.tg-dest, .tg-color { gap: var(--sp-3); }

/* ---------- W1 いつものタグで書く ---------- */
.tg-start-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(-1 * var(--sp-2)); }
.tg-start-head .section-title { padding-bottom: 0; }
.tg-edit-btn .btn-label { font-size: var(--fs-body); }
.tg-start .group { margin-bottom: 0; }
.tg-combo { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tg-set-row .row-title, .tg-combo-row .row-title { -webkit-line-clamp: unset; display: block; }
.tg-set-row.is-edit .row-main, .tg-combo-row.is-edit .row-main { display: flex; align-items: center; gap: var(--sp-3); }
.tg-set-row.is-edit .row-body, .tg-combo-row.is-edit .row-body { flex: 1; min-width: 0; }
/* 直す形の行の右に、押すと起きることの言葉（「直す」「登録」） */
.tg-act { flex: none; color: var(--accent); font-size: var(--fs-body); font-weight: var(--fw-normal); }
.tg-pick-btn { width: 100%; min-height: var(--hit); }

/* ---------- W2 タグを付ける ---------- */
.tg-picker { gap: var(--sp-4); }
.tg-chosen { display: flex; flex-direction: column; gap: var(--sp-2); }
.tg-chosen-title { margin: 0; color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.tg-pick-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.tg-pick-sec { display: flex; flex-direction: column; gap: var(--sp-2); }
.tg-pick-head { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--text-2); font-size: var(--fs-small); font-weight: var(--fw-normal); line-height: var(--lh-ui); }
.tg-create { margin: 0; }
.tg-create-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--hit);
  padding: 0 var(--cell-x);
  border: 0;
  background: var(--surface);
  color: var(--accent);
  font-weight: var(--fw-bold);
  text-align: left;
}
.tg-create-btn:active { background: var(--press); }
.tg-create-icon { display: inline-flex; }
.chip.is-flash { box-shadow: 0 0 0 2px var(--accent); }
.chip.is-partial { border-color: var(--line-strong); border-style: dashed; }
.tg-part-mark { font-weight: var(--fw-bold); }
.tg-part-note { color: var(--text-2); font-size: var(--fs-small); }

/* お知らせ（下に浮く帯）に最後の行が隠れないよう、送れる中身の下を空ける */
.tg-body { padding-bottom: calc(var(--tab-h) + 2 * var(--sp-7)); }
.tg-sec-chev.is-blank { visibility: hidden; }