/* ===========================================================================
   「自己学習」タイル（.mss-*）── 2026-09-06・/admin/bugfix/ #33 #34

   会員5画面（private / mypage / summit / speaking-summit / myessay）の
   ダッシュボードで同じ markup を使うので、画面ごとのCSSではなくここに置く
   （掲示板 forum.css・記事ガイド article-guide.css と同じ扱い。
   規約「CSS の置き場」＝ docs/spec/member-design-standard.md）。

   markup を出すのは common/member/selfstudy-tile.php の1本だけ。
   ▲ 元はプライベートの .pv2-tools / .pv2-tool だった。値はそのまま持ってきている。
   =========================================================================== */

.mss {
  /* ▲ グリッドの子として置く画面（private）では 0 に上書きすること。
     それ以外の4画面は本文の流れの中に置くので、ここで間隔を持つ。 */
  margin-top: 14px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  overflow: hidden;
  /* ▲ 器に影は付けない（規約）。罫で分ける。 */
}
.mss__hd {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--ui-surface-head);
  border-bottom: 1px solid var(--ui-line);
}
.mss__hd > i { color: var(--ui-link); }
.mss__title { font-size: var(--ui-fs-card); font-weight: 700; color: var(--ui-ink-head); }
.mss__body { padding: 12px 14px; }

/* 2列。狭いところでは1列に落とす */
.mss__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) {
  .mss__grid { grid-template-columns: 1fr; }
}

.mss__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--ui-surface-sunken);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-ctl);
  color: var(--ui-ink-head) !important;
  text-decoration: none;
  font-size: var(--ui-fs-body); font-weight: 700;
}
.mss__item:hover { background: var(--ui-action-bg); color: var(--ui-ink-head); text-decoration: none; }
.mss__item > i { color: var(--ui-link); font-size: var(--ui-fs-lead); width: 20px; text-align: center; flex-shrink: 0; }
.mss__item small { display: block; font-weight: 600; color: var(--ui-ink-muted); font-size: var(--ui-fs-meta); }