/* =========================================================
   秘書アプリ「カラフル手帳」デザイン
   クリーム色の紙にパステルカラーのシールを貼ったような見た目。
   文字と背景の組み合わせは、コントラスト比 4.5:1 以上になるようにしてある
   ========================================================= */

:root {
  /* 紙と文字 */
  --color-bg: #fff8f0;
  --color-surface: #ffffff;
  --color-text: #3b2f2a;
  --color-muted: #6f5f55;
  --color-border: #f0e4d7;
  --color-input-border: #d9c8b8;

  /* 主な色（ボタンなど）：コーラル */
  --color-primary: #b5452a;
  --color-primary-dark: #963820;
  --color-primary-soft: #ffe9e1;

  /* パステル（背景）と、その上に載せる文字の色 */
  --sky: #dcefff;
  --sky-text: #0b4f82;
  --mint: #d9f5d3;
  --mint-text: #1f6b2a;
  --pink: #ffdfe8;
  --pink-text: #9b1c45;
  --peach: #ffe4cc;
  --peach-text: #8a3b00;
  --lavender: #e7e0ff;
  --lavender-text: #4a36a8;
  --lemon: #fff4c2;
  --lemon-text: #6b5000;

  /* 丸いシール（目印）の色 */
  --dot-high: #f06a5a;
  --dot-medium: #f5b83d;
  --dot-low: #9db4ff;
  --dot-memo: #8fcaff;
  --dot-task: #8fdc8a;
  --dot-review: #b9a6ff;
  --dot-record: #ffb27a;

  /* 状態を表す文字色 */
  --color-danger: #b42318;
  --color-danger-soft: #fff0ee;
  --color-done: #1f6b2a;
  --color-stat-blue: #1d4ed8;
  --color-stat-green: #166534;
  --color-stat-red: #c81e1e;

  --radius: 20px;
  --radius-small: 12px;
  --shadow: 0 1px 0 rgba(120, 80, 40, 0.04), 0 6px 18px rgba(120, 80, 40, 0.07);
  --shadow-hover: 0 2px 0 rgba(120, 80, 40, 0.05), 0 10px 24px rgba(120, 80, 40, 0.12);
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;

  /* 部品ごとの色（ダークモードでは下の [data-theme="dark"] で入れ替える） */
  --on-primary: #ffffff;
  --logo-bg: #ffffff;
  --nav-bg: rgba(255, 248, 240, 0.94);
  --stat-dot: rgba(255, 255, 255, 0.8);
  --progress-done: #5cbf6a;
  --input-bg: #fffdfa;
  --placeholder: #8a796d;
  --outline-border: #eac3b7;
  --danger-border: #f2c4bf;
  --done-card-bg: #faf5ef;
  --pinned-bg: #fff0f4;
  --heat-0: #f3e9de;
  --heat-1: #cdeccd;
  --heat-2: #86cf93;
  --heat-3: #3f9a55;
  --sky-border: #b9d9f3;
  --lemon-border: #e8d27a;
  --lemon-hover: #fff0a8;
  --lemon-ring: #f2d56b;
  --night-bg: #f4f1ff;

  /* 日付の選択欄やスクロールバーなど、ブラウザが描く部品も明るい見た目にする */
  color-scheme: light;
}

/* ---- 時間帯の配色（ライトモードのときだけ） ----
   朝（4〜10時台）は明るいレモン色、昼（11〜16時台）はいつものクリーム色、夜（17〜翌3時台）は落ち着いたラベンダー色。
   変えるのはページの背景と上部メニューの色合いだけ。data-time は app.js（と index.html の <head>）で時刻から決める */
:root[data-theme="light"][data-time="morning"] {
  --color-bg: #fffbe6;
  --nav-bg: rgba(255, 251, 230, 0.94);
}

:root[data-theme="light"][data-time="evening"] {
  --color-bg: #f6f2ff;
  --nav-bg: rgba(246, 242, 255, 0.94);
}

/* 夜は背景と「夜のしめくくり」欄の色が近くなるので、ふちと影で見分けられるようにする */
:root[data-theme="light"][data-time="evening"] .closing-card {
  border: 1.5px solid #dcd2fb;
  box-shadow: var(--shadow);
}

/* ---- ダークモード（上部のメニューの切り替えボタン、または パソコン・スマホの設定で切り替わる） ----
   夜の手帳のような、あたたかみのある暗い色。パステルは落ち着いた濃い色にし、文字は明るい色にする。
   文字と背景のコントラスト比 4.5:1 以上は、ダークでも守っている */
:root[data-theme="dark"] {
  --color-bg: #1d1916;
  --color-surface: #28221e;
  --color-text: #f2e9e1;
  --color-muted: #c4b5a8;
  --color-border: #3a322c;
  --color-input-border: #5f5047;

  /* ダークでは明るいコーラルにして、ボタンの文字は濃い色にする */
  --color-primary: #ff9b7c;
  --color-primary-dark: #ffb69f;
  --color-primary-soft: #3e2820;
  --on-primary: #2a120a;

  --sky: #1b3346;
  --sky-text: #a9d4ff;
  --mint: #1d3a22;
  --mint-text: #a6e8a0;
  --pink: #45212c;
  --pink-text: #ffbfd1;
  --peach: #46301c;
  --peach-text: #ffcf9e;
  --lavender: #2f2a4d;
  --lavender-text: #cfc4ff;
  --lemon: #3d3416;
  --lemon-text: #f7dd7a;

  --color-danger: #ff9d90;
  --color-danger-soft: #3d2220;
  --color-done: #a6e8a0;
  --color-stat-blue: #9cc2ff;
  --color-stat-green: #8fe39a;
  --color-stat-red: #ff9d9d;

  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 2px 0 rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.5);

  --logo-bg: #f6efe6;
  --nav-bg: rgba(29, 25, 22, 0.94);
  --stat-dot: rgba(255, 255, 255, 0.22);
  --input-bg: #211c19;
  --placeholder: #a8998d;
  --outline-border: #6b4a3f;
  --danger-border: #6a3530;
  --done-card-bg: #221d1a;
  --pinned-bg: #3a2029;
  --heat-0: #352d28;
  --heat-1: #2f5536;
  --heat-2: #4f9a5d;
  --heat-3: #8fe39a;
  --sky-border: #2c5476;
  --lemon-border: #6b5a22;
  --lemon-hover: #4a3f1a;
  --lemon-ring: #8a7430;
  --night-bg: #232038;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---- ヘッダー ---- */
.app-header {
  background: var(--color-bg);
}

.app-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 手帳の表紙に貼った丸いシール */
/* ロゴ（湯気の立つ本）。白い丸いシールの上に載せる */
.brand-mark {
  display: block;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  padding: 5px;
  border-radius: 50%;
  background: var(--logo-bg);
  box-shadow: var(--shadow);
}

.brand h1 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* キャッチコピー */
.tagline {
  margin: 2px 0 0;
  color: var(--peach-text);
  font-size: 0.875rem;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.greeting {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

.today {
  margin: 0;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 0.875rem;
  box-shadow: var(--shadow);
  white-space: nowrap;
}

/* ライト／ダークを切り替える瞬間だけ、色の変化の動きを止める（app.js の applyTheme で付け外しする） */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

/* ライト／ダーク切り替えボタン（上部のメニューの「振り返り」の右。スクロールしても付いてくる） */
.jump-nav-theme {
  display: flex;
  align-items: center;
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1.5px solid var(--color-border);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: inherit;
  padding: 3px 14px;
  border: 1.5px solid var(--outline-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow);
}

.theme-toggle:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px 56px;
}

/* ---- ページ内ジャンプ（画面上部に固定するメニュー） ---- */
.jump-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nav-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.jump-nav-list {
  list-style: none;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.jump-link {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow);
}

.jump-link:hover {
  background: var(--color-primary-soft);
}

.jump-link.is-active {
  background: var(--color-primary);
  color: var(--on-primary);
}

.jump-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* メニューに隠れないよう、移動先の上に余白をとる */
main [id] {
  scroll-margin-top: 72px;
}

/* ---- ダッシュボード ---- */
.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

/* 件数：パステルの付箋。数字の色はメモ＝青、タスク＝緑、未完了＝赤 */
.stat {
  position: relative;
  border-radius: var(--radius);
  padding: 16px 20px 14px;
  background: var(--stat-bg);
}

.stat--blue {
  --stat-bg: var(--sky);
  --stat-color: var(--color-stat-blue);
  --stat-label: var(--sky-text);
}

.stat--green {
  --stat-bg: var(--mint);
  --stat-color: var(--color-stat-green);
  --stat-label: var(--mint-text);
}

.stat--red {
  --stat-bg: var(--pink);
  --stat-color: var(--color-stat-red);
  --stat-label: var(--pink-text);
}

/* 右上の小さな丸いシール */
.stat::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 16px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--stat-dot);
  opacity: 0.8;
}

.stat-label {
  margin: 0;
  color: var(--stat-label, var(--color-muted));
  font-size: 0.875rem;
  font-weight: bold;
}

.stat-value {
  margin: 2px 0 0;
  color: var(--stat-label, var(--color-muted));
}

.stat-value span {
  color: var(--stat-color);
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.2;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

/* 白いカード（今日やること・連続記録・振り返りなど共通） */
.today-card,
.streak-card,
.latest-review,
.panel {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 今日やること：タイムライン（3列のうち2列分） */
.today-card {
  grid-column: span 2;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
}

.today-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
}

.today-card .stat-label,
.streak-card .stat-label,
.latest-review .stat-label {
  color: var(--color-text);
  font-size: 1rem;
}

.today-counts {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
}

.today-count {
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--sky);
  color: var(--sky-text);
}

.today-count--overdue {
  background: var(--pink);
  color: var(--pink-text);
}

.today-count strong {
  font-size: 0.9375rem;
}

/* 今日やることが無いときは、カードの残りいっぱいにミント色の欄を広げる */
.today-empty {
  flex: 1;
  display: grid;
  place-items: center;
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-small);
  background: var(--mint);
  color: var(--mint-text);
  font-size: 0.9375rem;
  text-align: center;
}

.today-empty[hidden] {
  display: none;
}

/* 縦の線に、色の丸印を並べる */
.today-list {
  position: relative;
  list-style: none;
  margin: 14px 0 0;
  padding: 0 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.today-list::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--color-border);
}

.today-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-small);
  background: var(--color-bg);
}

.today-item::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--dot-medium);
  box-shadow: 0 0 0 3px var(--color-surface);
}

.today-item.prio-high::before {
  background: var(--dot-high);
}

.today-item.prio-low::before {
  background: var(--dot-low);
}

.today-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.today-title {
  font-weight: bold;
  overflow-wrap: anywhere;
}

/* 連続記録（3列のうち1列分） */
.streak-card {
  padding: 18px 22px;
  min-width: 0;
}

.streak-goal {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.streak-goal select {
  width: auto;
  padding: 2px 8px;
}

.streak-value {
  margin: 4px 0 0;
  color: var(--color-muted);
}

.streak-value span {
  color: var(--peach-text);
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.2;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

.streak-best {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

/* 今日の目標の達成度（横棒） */
.progress {
  height: 12px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--peach);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--dot-record);
  transition: width 0.3s;
}

.progress.is-achieved {
  background: var(--mint);
}

.progress.is-achieved .progress-bar {
  background: var(--progress-done);
}

.streak-progress-text {
  margin: 4px 0 0;
  font-size: 0.8125rem;
}

/* 今週（月〜日）の達成状況：丸いシール */
.streak-week {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.streak-day-name {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.streak-day-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: bold;
  border: 2px dashed var(--color-input-border);
  color: var(--color-muted);
}

.streak-day--done .streak-day-mark {
  border: none;
  background: var(--mint);
  color: var(--mint-text);
}

.streak-day--rest .streak-day-mark {
  border: none;
  background: var(--lavender);
  color: var(--lavender-text);
}

.streak-day--today .streak-day-mark {
  border: 2px solid var(--dot-record);
  color: var(--peach-text);
}

.streak-day--future .streak-day-mark {
  border-color: var(--color-border);
}

.streak-note {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* 最新の振り返り：レモン色の付箋 */
.latest-review {
  grid-column: 1 / -1;
  padding: 16px 22px;
  background: var(--lemon);
  box-shadow: none;
}

.latest-review-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.latest-review .stat-label {
  color: var(--lemon-text);
}

.link-more {
  color: var(--lemon-text);
  font-size: 0.8125rem;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.link-more:hover {
  text-decoration-thickness: 2px;
}

.latest-review-week {
  margin: 6px 0 0;
  font-weight: bold;
}

/* 長いコメントは3行までにして「…」で省略する */
.latest-review-comment {
  margin: 4px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.latest-review-comment.is-empty {
  color: var(--color-muted);
}

/* ---- 2列レイアウト ---- */
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* 入力欄のカード */
.panel {
  padding: 22px;
}

/* 見出しの前の丸いシール（メモ＝空色、タスク＝ミント、振り返り＝ラベンダー、記録＝オレンジ） */
.panel-title,
.list-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 1.05rem;
  line-height: 1.4;
}

.panel-title {
  margin: 0 0 16px;
}

.list-title {
  margin: 0 0 12px;
  padding-left: 4px;
}

.panel-title::before,
.list-title::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--title-dot, var(--dot-record));
}

.title--memo {
  --title-dot: var(--dot-memo);
}

.title--task {
  --title-dot: var(--dot-task);
}

.title--review {
  --title-dot: var(--dot-review);
}

.title--record {
  --title-dot: var(--dot-record);
}

.list-note {
  font-size: 0.75rem;
  font-weight: normal;
  color: var(--color-muted);
}

/* ---- 検索 ---- */
.search {
  margin-bottom: 24px;
}

.search input {
  padding: 12px 20px;
  border-radius: 999px;
  border-color: var(--color-surface);
  box-shadow: var(--shadow);
}

.search-result {
  margin: 8px 0 0 8px;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.search-result:empty {
  display: none;
}

/* ---- タグ ---- */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0 8px;
}

.tag-filter[hidden] {
  display: none;
}

.tag-filter-label {
  font-size: 0.8125rem;
  font-weight: bold;
  color: var(--color-muted);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 0;
}

.tag {
  font: inherit;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1.6;
  padding: 2px 12px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.tag:hover {
  border-color: currentColor;
}

.tag:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* 絞り込み中のタグは枠を付けて目立たせる */
.tag.is-active {
  border-color: currentColor;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px currentColor;
}

.tag--all {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-input-border);
}

.tag--1 {
  color: var(--sky-text);
  background: var(--sky);
}

.tag--2 {
  color: var(--mint-text);
  background: var(--mint);
}

.tag--3 {
  color: var(--lavender-text);
  background: var(--lavender);
}

.tag--4 {
  color: var(--peach-text);
  background: var(--peach);
}

.tag--5 {
  color: var(--pink-text);
  background: var(--pink);
}

.tag--6 {
  color: var(--lemon-text);
  background: var(--lemon);
}

/* ---- フォーム ---- */
.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form--inline,
.form-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.form--inline input,
.form-row input {
  flex: 1;
  min-width: 0;
}

/* タスクの期限・優先度・繰り返し・タグの欄 */
.task-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.option label {
  font-size: 0.8125rem;
  font-weight: bold;
  color: var(--color-muted);
}

.option input,
.option select {
  width: auto;
  padding: 6px 12px;
}

.form .option .btn {
  align-self: center;
}

/* タグの入力欄など、横に広げたい項目 */
.option--wide {
  flex: 1 1 240px;
}

.option--wide input {
  flex: 1;
  min-width: 120px;
}

.form-hint {
  margin: -6px 0 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 0.8125rem;
  font-weight: bold;
  color: var(--color-muted);
}

.field-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
  padding: 10px 14px;
  border: 1.5px solid var(--color-input-border);
  border-radius: var(--radius-small);
  background: var(--input-bg);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(181, 69, 42, 0.18);
}

textarea {
  resize: vertical;
}

select {
  cursor: pointer;
}

/* 振り返り欄の、選んだ週の説明 */
.review-summary {
  margin: -4px 0 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
  white-space: pre-line;
}

/* ---- ボタン（丸いピル型） ---- */
.btn {
  font: inherit;
  cursor: pointer;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 10px 22px;
  background: var(--color-primary);
  color: var(--on-primary);
  font-weight: bold;
  white-space: nowrap;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.btn:hover {
  background: var(--color-primary-dark);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(181, 69, 42, 0.3);
}

.form:not(.form--inline) > .btn {
  align-self: flex-start;
}

.btn--small {
  padding: 4px 14px;
  font-size: 0.8125rem;
}

.btn--outline {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--outline-border);
}

.btn--outline:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.btn--danger {
  background: var(--color-surface);
  color: var(--color-danger);
  border-color: var(--danger-border);
}

.btn--danger:hover {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}

/* ---- 一覧（1件ずつ、左に丸いシールを貼ったカード） ---- */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.memo,
.task,
.review {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px 16px 46px;
  transition: box-shadow 0.15s, transform 0.15s;
}

.memo:hover,
.task:hover,
.review:hover {
  box-shadow: var(--shadow-hover);
}

/* カード左上の丸いシール（色は種類や優先度で変える） */
.memo::before,
.task::before,
.review::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 20px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card-dot, var(--dot-memo));
}

.task {
  --card-dot: var(--dot-medium);
}

.task.prio-high {
  --card-dot: var(--dot-high);
}

.task.prio-low {
  --card-dot: var(--dot-low);
}

.review {
  --card-dot: var(--dot-review);
}

/* カードの幅が足りないときは、ボタンを本文の下に回り込ませる */
.memo,
.task,
.review {
  flex-wrap: wrap;
}

.memo-main,
.task-main,
.review-main {
  flex: 1 1 240px;
  min-width: 0;
}

.memo-title,
.task-title,
.review-week {
  margin: 0;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.memo-body,
.review-comment {
  margin: 6px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 0.8125rem;
}

/* ボタンの列はカードの幅を超えない（入りきらなければ次の行へ折り返す） */
.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
  max-width: 100%;
}

/* 完了したタスク：シールに ✓ を入れ、全体を控えめに */
.task.is-done {
  background: var(--done-card-bg);
  box-shadow: none;
  --card-dot: var(--mint);
}

.task.is-done::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  left: 16px;
  top: 18px;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--mint-text);
}

.task.is-done .task-title {
  text-decoration: line-through;
  text-decoration-color: var(--color-input-border);
  color: var(--color-muted);
  font-weight: normal;
}

/* ピン留めしたメモ：ピンクの付箋 */
.memo.is-pinned {
  background: var(--pinned-bg);
  --card-dot: #ff8fb0;
}

.pin-label {
  display: inline-block;
  margin-bottom: 4px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--pink-text);
  background: var(--pink);
}

/* 編集中のカード */
.task--editing {
  display: block;
  padding-left: 18px;
  box-shadow: 0 0 0 2px var(--color-primary), var(--shadow);
}

.task--editing::before {
  display: none;
}

.task-edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- 小さなラベル（パステルのピル） ---- */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 1px 10px;
  border-radius: 999px;
}

.badge--open {
  color: var(--pink-text);
  background: var(--pink);
}

.badge--done {
  color: var(--mint-text);
  background: var(--mint);
}

.badge--prio-high {
  color: var(--pink-text);
  background: var(--pink);
}

.badge--prio-medium {
  color: var(--lemon-text);
  background: var(--lemon);
}

.badge--prio-low {
  color: var(--lavender-text);
  background: var(--lavender);
}

.badge--repeat {
  color: var(--sky-text);
  background: var(--sky);
}

.badge--info {
  color: var(--peach-text);
  background: var(--peach);
}

/* 期限 */
.due {
  font-size: 0.8125rem;
}

.due--overdue {
  color: var(--color-danger);
  font-weight: bold;
}

.due--today {
  color: var(--color-stat-blue);
  font-weight: bold;
}

.due--soon {
  color: var(--mint-text);
  font-weight: bold;
}

/* ---- 「もっと見る」と、完了済みタスクの折りたたみ ---- */
.list-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.list-more:empty {
  display: none;
}

.done-section {
  margin-top: 16px;
}

.done-section[hidden] {
  display: none;
}

.done-toggle {
  width: 100%;
  font: inherit;
  font-weight: bold;
  font-size: 0.9375rem;
  color: var(--mint-text);
  background: var(--mint);
  border: none;
  border-radius: var(--radius);
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
}

.done-toggle::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s;
}

.done-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.done-toggle:hover {
  box-shadow: inset 0 0 0 2px currentColor;
}

.done-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

#done-body .list {
  margin-top: 12px;
}

/* ---- 振り返り ---- */
.reviews {
  margin-top: 36px;
}

/* 完了したタスクの記録（ヒートマップ） */
.heatmap-panel {
  margin-bottom: 20px;
}

.heatmap-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 12px;
  font-size: 0.75rem;
  color: var(--color-muted);
}

.heatmap-scroll {
  overflow-x: auto;
}

.heatmap {
  --cell: 22px;
  display: grid;
  grid-template-rows: repeat(7, var(--cell));
  grid-template-columns: 22px;
  grid-auto-columns: var(--cell);
  grid-auto-flow: column;
  gap: 5px;
  width: max-content;
}

.heatmap-label {
  font-size: 0.6875rem;
  line-height: var(--cell);
  color: var(--color-muted);
}

/* マスは丸いシール */
.cell {
  display: inline-block;
  width: var(--cell, 12px);
  height: var(--cell, 12px);
  border-radius: 50%;
}

.cell.lv0 {
  background: var(--heat-0);
}

.cell.lv1 {
  background: var(--heat-1);
}

.cell.lv2 {
  background: var(--heat-2);
}

.cell.lv3 {
  background: var(--heat-3);
}

.cell.future {
  border: 1.5px dashed var(--color-border);
}

.cell.is-today {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.heatmap-note {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* 振り返り欄の「この週に完了したタスク」 */
.review-done {
  font-size: 0.875rem;
  border-radius: var(--radius-small);
  background: var(--color-bg);
  padding: 10px 14px;
  margin-top: -4px;
}

.review-done summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: bold;
}

.review-done ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-done li {
  display: flex;
  gap: 10px;
  overflow-wrap: anywhere;
}

.review-done-date {
  flex-shrink: 0;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.review-done-empty {
  color: var(--color-muted);
}

/* ---- そのほか ---- */
.empty {
  margin: 0;
  padding: 26px 16px;
  text-align: center;
  color: var(--color-muted);
  background: transparent;
  border: 2px dashed var(--color-input-border);
  border-radius: var(--radius);
}

.empty[hidden] {
  display: none;
}

.message {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  border: 1.5px solid var(--danger-border);
  border-radius: var(--radius-small);
  padding: 10px 16px;
  margin: 0 0 20px;
}

/* エラーではない案内。どこでボタンを押しても見えるよう、画面の下に浮かせる */
.message.message--info {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 20;
  width: min(560px, calc(100% - 32px));
  transform: translateX(-50%);
  margin: 0;
  background: var(--sky);
  color: var(--sky-text);
  border-color: var(--sky-border);
  box-shadow: var(--shadow-hover);
}

/* 公開サイト版であることの案内（データはこのブラウザの中だけに保存）。レモン色の付箋 */
.browser-notice {
  margin: 0 0 18px;
  padding: 12px 18px;
  border-radius: var(--radius-small);
  background: var(--lemon);
  color: var(--lemon-text);
  font-size: 0.9375rem;
}

.browser-notice[hidden] {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- スマホ幅 ---- */
@media (max-width: 768px) {
  /* 上部のメニュー（4つ＋切り替えボタン）を1行に収める */
  .jump-nav-list {
    gap: 4px;
    padding: 8px 12px;
  }

  .jump-link {
    padding: 4px 10px;
    font-size: 0.8125rem;
  }

  /* 切り替えボタンはアイコンだけにする（文字は読み上げ用に残す） */
  .jump-nav-theme {
    margin-left: 2px;
    padding-left: 6px;
  }

  .theme-toggle {
    padding: 3px 10px;
    font-size: 0.8125rem;
  }

  .theme-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .app-header-inner {
    flex-wrap: wrap;
    padding-top: 16px;
  }

  .container {
    padding-top: 16px;
  }

  .columns {
    grid-template-columns: 1fr;
  }

  .dashboard {
    gap: 8px;
    margin-bottom: 16px;
  }

  .stat {
    padding: 12px 12px 10px;
  }

  .stat::after {
    display: none;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .stat-value span {
    font-size: 1.8rem;
  }

  .today-card,
  .streak-card {
    grid-column: 1 / -1;
  }

  .today-card,
  .streak-card,
  .latest-review,
  .panel {
    padding: 16px;
  }

  .today-item {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ボタンは「回り込み」で本文の下に並ぶので、縦並びにはしない（縦並びにすると本文の欄が縦に伸びてしまう） */
  .memo,
  .task,
  .review {
    padding-right: 14px;
  }

  .reviews {
    margin-top: 24px;
  }

  .heatmap {
    --cell: 15px;
    gap: 3px;
  }
}

/* =========================================================
   朝と夜の習慣・ごほうびシール
   ========================================================= */

/* ダッシュボードの並び：件数 → 今日の3つ＋連続記録 → 期限のお知らせ＋シール帳 → 夜のしめくくり → 最新の振り返り
   夕方以降（.is-evening）は、夜のしめくくりを件数のすぐ下に上げる */
.dashboard > * {
  order: 2;
}

.dashboard > .stat {
  order: 1;
}

.dashboard.is-evening > .closing-card {
  order: 1;
}

/* 「今の時間におすすめ」の小さなラベル */
.time-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--peach);
  color: var(--peach-text);
  font-size: 0.75rem;
  vertical-align: middle;
}

.time-badge[hidden] {
  display: none;
}

/* ---- 今日の3つ ---- */
.picks-card {
  grid-column: span 2;
  padding: 18px 22px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.picks-card .stat-label {
  color: var(--color-text);
  font-size: 1rem;
}

.picks-progress {
  margin: 0;
  padding: 1px 12px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--mint-text);
  font-size: 0.8125rem;
  font-weight: bold;
}

.picks-progress:empty {
  display: none;
}

.picks-empty,
.picks-cheer,
.picks-note {
  margin: 12px 0 0;
  color: var(--color-muted);
}

.picks-cheer {
  padding: 10px 14px;
  border-radius: var(--radius-small);
  background: var(--mint);
  color: var(--mint-text);
  font-weight: bold;
}

.picks-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-small);
  background: var(--color-bg);
}

/* 丸いチェック（押すと完了） */
.pick-check {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid var(--dot-record);
  background: var(--color-surface);
  color: var(--mint-text);
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.pick-check:hover {
  background: var(--peach);
}

.pick-check:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pick.is-done .pick-check {
  border-color: transparent;
  background: var(--mint);
}

.pick-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
}

.pick-title {
  font-weight: bold;
  overflow-wrap: anywhere;
}

.pick.is-done .pick-title {
  color: var(--color-muted);
  font-weight: normal;
  text-decoration: line-through;
  text-decoration-color: var(--color-input-border);
}

.picks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* 今日の3つを選ぶ欄 */
.picks-count {
  margin: 10px 0 0;
  font-size: 0.8125rem;
  font-weight: bold;
  color: var(--peach-text);
}

.picks-options {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pick-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 12px;
  border-radius: var(--radius-small);
  background: var(--color-bg);
  cursor: pointer;
}

.pick-option:has(input:checked) {
  background: var(--lemon);
}

.pick-option:has(input:disabled) {
  cursor: default;
}

.pick-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
}

/* タスク一覧の「今日の3つに入れる」 */
.btn--picked {
  background: var(--lemon);
  color: var(--lemon-text);
  border-color: var(--lemon-border);
}

.btn--picked:hover {
  background: var(--lemon-hover);
  border-color: var(--lemon-text);
}

.task.is-picked {
  box-shadow: 0 0 0 2px var(--lemon-ring), var(--shadow);
}

/* ---- シール帳 ---- */
.sticker-card {
  padding: 18px 22px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}

.sticker-card .stat-label {
  color: var(--color-text);
  font-size: 1rem;
}

.sticker-week {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 4px;
}

.sticker-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0 6px;
  border-radius: 10px;
}

.sticker-day.is-today {
  background: var(--color-bg);
}

.sticker-day-name {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.sticker-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 22px;
}

.sticker {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.75rem;
  line-height: 1;
}

.sticker--star {
  background: var(--lemon);
  color: var(--lemon-text);
}

.sticker--moon {
  background: var(--lavender);
  color: var(--lavender-text);
}

.sticker--pen {
  background: var(--peach);
  color: var(--peach-text);
}

.sticker-total {
  margin: 10px 0 0;
  font-size: 0.875rem;
  font-weight: bold;
}

.sticker-hint {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* ---- 夜のしめくくり（ラベンダーの夜色） ---- */
.closing-card {
  grid-column: 1 / -1;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--night-bg);
}

.closing-card .stat-label {
  color: var(--lavender-text);
  font-size: 1rem;
}

.closing-status {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: bold;
  color: var(--lavender-text);
}

.closing-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px 24px;
  margin-top: 12px;
}

.closing-sub {
  margin: 0;
  font-size: 0.875rem;
  font-weight: bold;
  color: var(--color-muted);
}

.closing-done {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9375rem;
}

.closing-done li {
  display: flex;
  gap: 10px;
  overflow-wrap: anywhere;
}

.closing-time {
  flex-shrink: 0;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.closing-done-empty {
  color: var(--color-muted);
}

.closing-carry {
  margin-top: 12px;
}

.closing-form {
  gap: 12px;
}

/* 気分スタンプ（ラジオボタンを丸いラベルに見せる） */
.moods {
  margin: 0;
  padding: 0;
  border: none;
}

.moods legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  font-weight: bold;
  color: var(--color-muted);
}

.mood-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mood {
  position: relative;
  cursor: pointer;
}

.mood input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.mood span,
.mood-chip {
  display: inline-block;
  padding: 3px 14px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-size: 0.8125rem;
  font-weight: bold;
  background: var(--mood-bg);
  color: var(--mood-text);
}

.mood-chip {
  padding: 0 10px;
  font-size: 0.75rem;
}

.mood input:checked + span {
  border-color: currentColor;
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px currentColor;
}

.mood input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.mood--great {
  --mood-bg: var(--peach);
  --mood-text: var(--peach-text);
}

.mood--good {
  --mood-bg: var(--mint);
  --mood-text: var(--mint-text);
}

.mood--ok {
  --mood-bg: var(--sky);
  --mood-text: var(--sky-text);
}

.mood--tired {
  --mood-bg: var(--lavender);
  --mood-text: var(--lavender-text);
}

.mood--bad {
  --mood-bg: var(--pink);
  --mood-text: var(--pink-text);
}

/* ヒートマップ：夜のしめくくりを書いた日は紫のふち */
.cell.has-note {
  box-shadow: inset 0 0 0 2.5px var(--dot-review);
}

/* ---- 振り返り：今週できたことのまとめ ---- */
.review-auto {
  padding: 12px 14px;
  border-radius: var(--radius-small);
  background: var(--lemon);
  color: var(--color-text);
}

.review-auto-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: bold;
  color: var(--lemon-text);
}

.review-auto-text {
  margin: 4px 0 0;
  font-size: 0.9375rem;
}

.review-auto-days {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
}

.review-auto-days li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.review-auto-note {
  overflow-wrap: anywhere;
}

/* ---- スマホ幅 ---- */
@media (max-width: 768px) {
  .picks-card,
  .sticker-card {
    grid-column: 1 / -1;
    padding: 16px;
  }

  .closing-card {
    padding: 16px;
  }

  .closing-grid {
    grid-template-columns: 1fr;
  }

  .pick {
    flex-wrap: wrap;
  }
}