@charset "UTF-8";
/* ============================================================================
 * views/settings.css
 * COLAVIA v1.002.0000
 *
 *   個人設定（§5.8-1）。通知設定と表示設定の2タブ。
 *
 *   出所: mock/settings.html の <style> から切り出したもの。
 *         .set-grid / .set-col / .save-bar は他の設定画面でも使うため
 *         components.css へ移してある。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * パネル
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 通知の種類の表
 * ------------------------------------------------------------------------- */

.notify-tbl tbody tr { cursor: default; }

.notify-tbl tbody tr:hover { background-color: transparent; }

.notify-tbl td { padding: var(--sp-2) var(--sp-3); }

.notify-tbl td.col-check { text-align: center; }

.notify-name { font-size: var(--fs-sm); font-weight: 500; }

.notify-desc { font-size: var(--fs-xs); color: var(--c-text-secondary); line-height: 1.6; }

/* チェックボックス。表の中で押しやすいよう領域を広げる */

.check {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm);
  cursor: pointer;
}

.check:hover { background-color: var(--c-fill); }

.check input { width: 1.0625rem; height: 1.0625rem; accent-color: var(--c-accent); cursor: pointer; }

.check input:disabled { cursor: not-allowed; }

/* 変更できない項目の説明 */

.fixed-note { font-size: var(--fs-xs); color: var(--c-text-tertiary); }

/* ---------------------------------------------------------------------------
 * 期限の通知時期（複数選択）
 *   チップそのもの（.tag-picks / .tag-pick）は components.css にある。
 *   ボードのタグ絞り込みでも同じものを使うため
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * レスポンシブ
 * ------------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .set-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 5.5rem; }
  .save-bar { padding: var(--sp-3); flex-wrap: wrap; }
  .save-bar .sec__note { width: 100%; margin-bottom: var(--sp-1); }
}