/* おかえりToDo v1 */
:root{
  --bg:#F0F6DC; --paper:#FDFFF6; --ink:#3B3A33; --sub:#84876F;
  --ai:#4C6FA0; --ai-bg:#E9EFF7; --gold:#C29B2C; --gold-bg:#F7EFD2;
  --line:#DCE4C0; --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic UI",sans-serif;
  font-size:16px; line-height:1.7;
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
#app{max-width:480px; margin:0 auto; padding:16px 16px 0;}
h1{font-size:20px; margin:8px 0 4px;}
h2{font-size:16px; margin:20px 0 8px;}
p{margin:6px 0;}
.sub{color:var(--sub); font-size:13px;}
.center{text-align:center;}
[hidden]{display:none !important;}
button{
  font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:12px 16px; cursor:pointer;
}
button:active{transform:scale(0.98);}
button.primary{background:var(--ai); border-color:var(--ai); color:#fff;}
button.ghost{background:transparent; border-color:transparent; color:var(--ai); padding:8px 10px;}
input,select,textarea{
  font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
  padding:10px 12px; width:100%;
}
textarea{min-height:88px;}
label{font-size:13px; color:var(--sub); display:block; margin:12px 0 4px;}

/* カード */
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:12px 0;}
.task-card{border-top:6px solid var(--ai);}
.task-card .task-name{font-size:20px; font-weight:700; margin:4px 0 2px;}
.chip{display:inline-block; font-size:12px; border-radius:999px; padding:2px 10px; background:var(--ai-bg); color:var(--ai);}
.btn-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;}
.btn-done{background:var(--ai-bg); border-color:var(--ai-bg); color:#2E4A73; font-weight:700; padding:16px 8px; font-size:17px;}
.btn-rest{background:var(--gold-bg); border-color:var(--gold-bg); color:#7A5C12; font-weight:700; padding:16px 8px; font-size:17px;}

/* タブバー */
#tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:var(--paper); border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  max-width:512px; margin:0 auto;
}
#tabbar button{border:none; background:none; border-radius:10px; padding:8px 4px; font-size:12px; color:var(--sub); line-height:1.3;}
#tabbar button .ico{display:block; font-size:18px; line-height:1.2;}
#tabbar button.active{color:var(--ai); background:var(--ai-bg); font-weight:700;}

/* ねぎらいトースト */
#praise{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(84px + env(safe-area-inset-bottom)); z-index:30;
  background:var(--ink); color:#FFFDF7; border-radius:14px;
  padding:12px 18px; max-width:90%; width:max-content; text-align:center;
  box-shadow:0 4px 16px rgba(59,58,51,0.25);
}
#praise .reasons{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:10px;}
#praise .reasons button{font-size:13px; padding:6px 12px; border-radius:999px; background:#57554B; border-color:#57554B; color:#FFFDF7;}
#praise .reasons button.picked{background:var(--gold); border-color:var(--gold); color:#3B3A33; font-weight:700;}
#praise .close{margin-top:8px; font-size:12px; color:#CFCabb; background:none; border:none; padding:4px;}

/* おかえり画面 */
.okaeri{background:var(--gold-bg); border:1px solid var(--gold); text-align:center; padding:28px 16px;}
.okaeri .big{font-size:24px; font-weight:700; margin:4px 0;}
.okaeri .count{color:#7A5C12; font-size:15px;}

/* ちず */
.week-strip{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:8px 0;}
.week-col{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:6px 2px; text-align:center; min-height:74px;}
.week-col.today{border-color:var(--ai); border-width:2px;}
.week-col .wd{font-size:10px; color:var(--sub);}
.week-col .dn{font-size:13px; font-weight:700;}
.dots{display:flex; flex-wrap:wrap; gap:3px; justify-content:center; margin-top:4px;}
.dot{width:9px; height:9px; border-radius:50%;}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin:14px 0 6px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px;}
.cal-wd{font-size:10px; color:var(--sub); text-align:center;}
.cal-cell{background:var(--paper); border:1px solid var(--line); border-radius:8px; min-height:46px; padding:2px; text-align:center;}
.cal-cell.blank{background:transparent; border-color:transparent;}
.cal-cell.today{border-color:var(--ai); border-width:2px;}
.cal-cell .dn{font-size:11px; color:var(--sub);}
.stats{margin-top:14px;}
.stats .row{display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding:7px 2px; font-size:15px;}
.stats .row b{font-size:17px;}

/* いちらん */
.group-head{display:flex; align-items:center; gap:8px; margin:16px 0 4px; font-weight:700;}
.group-head .gdot{width:12px; height:12px; border-radius:4px;}
.task-row{display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:6px 0; cursor:pointer;}
.task-row .tdot{width:12px; height:12px; border-radius:50%; flex:none;}
.task-row .tname{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.task-row .trep{font-size:11px; color:var(--sub); flex:none;}

/* 色スウォッチ・曜日チップ */
.swatches{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px;}
.swatch{width:34px; height:34px; border-radius:50%; border:3px solid transparent; cursor:pointer;}
.swatch.picked{border-color:var(--ink);}
.day-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;}
.day-chips button{padding:8px 0; width:40px; border-radius:999px; font-size:14px;}
.day-chips button.picked{background:var(--ai); border-color:var(--ai); color:#fff; font-weight:700;}
.repeat-fields{display:flex; gap:8px; align-items:center; margin-top:6px;}
.repeat-fields input[type="number"]{width:80px;}
.repeat-fields select{width:auto;}

.list-actions{display:flex; gap:10px; margin:10px 0;}
.spread{display:flex; justify-content:space-between; align-items:center; gap:8px;}
.small-note{font-size:12px; color:var(--sub); margin-top:4px;}
.divider{border:none; border-top:1px solid var(--line); margin:20px 0;}
.msg-quote{background:var(--gold-bg); border-radius:10px; padding:10px 14px; margin:10px 0;}
.recorded-list{margin-top:8px;}
.recorded-list .task-row{cursor:default;}
.status-tag{font-size:11px; border-radius:999px; padding:2px 8px; flex:none;}
.status-tag.done{background:var(--ai-bg); color:#2E4A73;}
.status-tag.rest{background:var(--gold-bg); color:#7A5C12;}