/* 未実装タブの共通プレースホルダ */

/* 上は 30 ではなく 62。右上の歯車（10..54px）の下から始めるため */
.stub { flex: 1; min-height: 0; overflow-y: auto; padding: 62px 20px 24px; }
.stub .tag {
  display: inline-block; font-size: 11px; letter-spacing: .12em;
  color: var(--text-2); border: 1px solid var(--line); border-radius: 3px;
  padding: 2px 7px; margin-bottom: 12px;
}
.stub h2 { font-size: 17px; margin: 0 0 8px; }
.stub p { font-size: 14px; color: var(--text-2); margin: 0 0 12px; }
.stub ul { font-size: 14px; color: var(--text-2); margin: 0 0 12px; padding-left: 1.2em; }
.stub li { margin-bottom: 5px; }
.stub .proto { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
/* --text-3 は --bg に対し 明2.60 / 暗3.94 で 4.5:1 を切る。見出しも読ませる文字なので --text-2 */
.stub .proto h3 {
  font-size: 12px; font-weight: 500; color: var(--text-2);
  margin: 0 0 10px; letter-spacing: .07em;
}
.stub .proto .row { display: flex; flex-wrap: wrap; gap: 8px; }
.stub .proto .note { font-size: 12px; color: var(--text-2); margin: 10px 0 0; line-height: 1.7; }

/* 設定の行。チェックボックスと文が並ぶ。タップ目標は 44px を下回らない */
.stub .setrow {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px; font-size: 14px; color: var(--text);
  cursor: pointer;
}
/* 押す的は行ぜんぶ（label で囲ってある）。四角そのものは素のままで、
   大きさだけ上げる——ここだけ作り込むと、ほかの的と作りが揃わない。
   20px は小さくて、ほかの的（44）と比べて粗く見えていた（レビューの指摘） */
.stub .setrow input { width: 24px; height: 24px; accent-color: var(--bub-edge); }
.stub .note { font-size: 12px; color: var(--text-2); margin: 6px 0 0; line-height: 1.7; }

/* ---------- タグの管理 ---------- */
/* 1行 = 色 / 名前 / 置く向き / 消す。タップ目標は 44px を下回らない */
.stub .tags { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.stub .tags h3 {
  font-size: 12px; font-weight: 500; color: var(--text-2);
  margin: 0 0 8px; letter-spacing: .07em;
}
.stub .taglist { display: grid; gap: 6px; margin: 12px 0; }
.stub .tagrow {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
/* タグの色。無彩色は「タグ無し」の意味なので、ここには来ない */
.stub .tagdot {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--tc, var(--text-2)); margin-left: 6px;
}
.stub .tagname {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--text);
  background: transparent; border: 0; padding: 10px 2px; min-height: 44px;
}
.stub input.tagname:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: -2px; border-radius: 6px; }
/* 特別なタグは名前を変えられない。**薄くしない**（レビューの指摘）——
   薄いとユーザーのタグだけが「生きている」ように見え、こちらが無効に読める。
   変えられないことは、入力欄ではなく素の文字で出ていること自体が言っている */
.stub .tagname.is-fixed { color: var(--text); }
.stub .tagdir {
  flex: none; font: inherit; font-size: 13px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px;
  min-height: 44px; padding: 0 8px;
}
/* 向きが固定されているタグ（下＝完了）。選び欄ではなく、字だけ置く。
   押せない的にしないため、枠も背景も出さない（select と見た目で分ける） */
.stub span.tagdir.is-fixed {
  border-color: transparent; background: transparent; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px;
}
.stub .tagdel {
  flex: none; appearance: none; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--text-2); background: transparent; border: 0;
  min-height: 44px; min-width: 44px; padding: 0 8px;
}
.stub .tagdel:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: -2px; border-radius: 8px; }
.stub .tagadd { display: flex; gap: 8px; }
.stub .tagadd input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px;
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--text);
}
.stub .tagadd input::placeholder { color: var(--text-2); }

/* 色の点は白地の上だと輪郭が消える（明テーマで 1.68:1）。細い縁を入れて形を保つ */
.stub .tagdot { box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ---------- ふりかえりへ（設定の中に入ったので、そこへ渡す行）----------
   設定の中身は「決める」もの、ふりかえりは「見る」もの。混ぜず、先頭に1行だけ置く。 */
.stub .gorow {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 10px 14px; margin: 0 0 22px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text);
  text-align: left;
  transition: border-color .12s, background-color .12s;
}
.stub .gorow:hover { border-color: var(--bub-edge); }
.stub .gorow:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
.stub .gorow .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.stub .gorow .nm { font-size: 14px; font-weight: 600; }
.stub .gorow .sub { font-size: 12.5px; color: var(--text-2); }
.stub .gorow .ar { flex: none; font-size: 16px; color: var(--text-2); }

/* 「海にする／している」。前は左右の選び欄だったところ（海が横一列になった） */
.stub .tagdir.is-sea {
  appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit;
  min-height: 44px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text-2);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: border-color .12s, color .12s, background-color .12s;
}
.stub .tagdir.is-sea:hover:not(:disabled) { color: var(--text); border-color: var(--bub-edge); }
.stub .tagdir.is-sea:focus-visible { outline: 2px solid var(--bub-edge); outline-offset: 2px; }
.stub .tagdir.is-sea.is-on { color: var(--text); border-color: var(--bub-edge); background: var(--surface); }
.stub .tagdir.is-sea:disabled { cursor: default; opacity: .5; }