/* Todo（SK's Toolbox）— Apple のリマインダーのような ToDo。Google のマテリアルデザイン（Material 3）
   色は M3 の役割のトークン（グリーン系の配色。Material Theme Builder のソースカラー #63a002）
   テーマカラーを選ぶと、settings.js が --md-* を上書きする
   初期値は端末の設定に合わせ、<html data-theme="light|dark"> で固定できる（SK's Toolbox の共通の設定。/toolbox/shared/settings.js）
   共通の部品（アイコン・状態レイヤー・波紋・戻るボタン・スナックバー・ダイアログ）は /toolbox/shared/m3.css
   広い画面: 左にリストの一覧、右に選んだリスト。せまい画面: 一覧と選んだリストを切りかえる（.app.is-list）
   リストの色（--c）は、リストごとに選んだ色（SK's Brand の色など） */
:root {
  --md-primary: #4c662b;
  --md-on-primary: #ffffff;
  --md-primary-container: #cdeda3;
  --md-on-primary-container: #354e16;
  --md-secondary-container: #dce7c8;
  --md-on-secondary-container: #404a33;
  --md-error: #ba1a1a;
  --md-error-container: #ffdad6;
  --md-on-error-container: #93000a;
  --md-surface: #f9faef;
  --md-on-surface: #1a1c16;
  --md-on-surface-variant: #44483d;
  --md-surface-container-low: #f3f4e9;
  --md-surface-container: #eeefe3;
  --md-surface-container-high: #e8e9de;
  --md-surface-container-highest: #e2e3d8;
  --md-outline: #75796c;
  --md-outline-variant: #c5c8ba;
  --md-inverse-surface: #2f312a;
  --md-inverse-on-surface: #f1f2e6;
  --md-inverse-primary: #b1d18a;
  --flag: #ea580c;
  --md-font: "M PLUS 1", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --md-emphasized: cubic-bezier(.2, 0, 0, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary: #b1d18a; --md-on-primary: #1f3701;
    --md-primary-container: #354e16; --md-on-primary-container: #cdeda3;
    --md-secondary-container: #404a33; --md-on-secondary-container: #dce7c8;
    --md-error: #ffb4ab; --md-error-container: #93000a; --md-on-error-container: #ffdad6;
    --md-surface: #12140e; --md-on-surface: #e2e3d8; --md-on-surface-variant: #c5c8ba;
    --md-surface-container-low: #1a1c16; --md-surface-container: #1e201a;
    --md-surface-container-high: #282b24; --md-surface-container-highest: #33362e;
    --md-outline: #8f9285; --md-outline-variant: #44483d;
    --md-inverse-surface: #e2e3d8; --md-inverse-on-surface: #2f312a; --md-inverse-primary: #4c662b;
    --flag: #fb923c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --md-primary: #b1d18a; --md-on-primary: #1f3701;
  --md-primary-container: #354e16; --md-on-primary-container: #cdeda3;
  --md-secondary-container: #404a33; --md-on-secondary-container: #dce7c8;
  --md-error: #ffb4ab; --md-error-container: #93000a; --md-on-error-container: #ffdad6;
  --md-surface: #12140e; --md-on-surface: #e2e3d8; --md-on-surface-variant: #c5c8ba;
  --md-surface-container-low: #1a1c16; --md-surface-container: #1e201a;
  --md-surface-container-high: #282b24; --md-surface-container-highest: #33362e;
  --md-outline: #8f9285; --md-outline-variant: #44483d;
  --md-inverse-surface: #e2e3d8; --md-inverse-on-surface: #2f312a; --md-inverse-primary: #4c662b;
  --flag: #fb923c;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--md-surface-container); color: var(--md-on-surface);
  font-family: var(--md-font);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 2px; }

.app {
  height: 100%;
  display: grid; grid-template-columns: minmax(300px, 360px) 1fr;
  padding: 0 max(8px, env(safe-area-inset-right)) 0 0;
}
.app-bar { display: flex; align-items: center; gap: 4px; min-height: 64px; }
.app-bar__space { flex: 1; }

/* ---- リストの一覧 ---- */
.side {
  position: relative; display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
  padding: max(4px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.search {
  display: flex; align-items: center; gap: 12px; height: 56px; margin: 0 4px 16px; padding: 0 16px; flex: none;
  border-radius: 28px; background: var(--md-surface-container-high); color: var(--md-on-surface-variant); cursor: text;
}
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 16px; color: var(--md-on-surface); }
.search input::placeholder { color: var(--md-on-surface-variant); }
.search:focus-within { background: var(--md-surface-container-highest); box-shadow: inset 0 0 0 2px var(--md-primary); }

/* スマートリスト（カード） */
.smart { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 4px; flex: none; }
.smart-card {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 8px 10px;
  padding: 12px 14px; border: 0; border-radius: 20px; text-align: left; cursor: pointer;
  background: var(--md-surface); color: var(--md-on-surface);
}
.smart-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.smart-card[aria-current="true"] { background: var(--c); color: #fff; }
.smart-card__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c); color: #fff; }
.smart-card__icon .msr { font-size: 20px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.smart-card[aria-current="true"] .smart-card__icon { background: rgba(255, 255, 255, .25); }
.smart-card__count { justify-self: end; font-size: 26px; font-weight: 700; line-height: 1; }
.smart-card__name { grid-column: 1 / -1; font-size: 14px; font-weight: 500; color: var(--md-on-surface-variant); }
.smart-card[aria-current="true"] .smart-card__name { color: rgba(255, 255, 255, .9); }

/* マイリスト */
.side__head { margin: 24px 16px 8px; font-size: 14px; font-weight: 500; color: var(--md-primary); }
.lists { display: flex; flex-direction: column; gap: 2px; }
.list-item {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 16px 6px 10px;
  border: 0; border-radius: 26px; background: none; text-align: left; cursor: pointer; font-size: 16px;
}
.list-item[aria-current="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.list-item__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--c); color: #fff; }
.list-item__icon .msr { font-size: 19px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.list-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item__count { font-size: 14px; color: var(--md-on-surface-variant); }
.add-list { align-self: flex-start; margin: 4px 0 0 6px; }
.add-list .msr { font-size: 20px; margin-right: 6px; }
.side__note { margin: auto 12px 0; padding-top: 24px; font-size: 11px; line-height: 16px; color: var(--md-on-surface-variant); }

/* メニュー */
.menu-wrap { position: relative; }
.menu {
  position: absolute; z-index: 20; top: calc(100% + 4px); right: 0;
  min-width: 260px; padding: 8px 0; border-radius: 4px;
  background: var(--md-surface-container); color: var(--md-on-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px 2px rgba(0, 0, 0, .15);
}
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px 0 12px; border: 0; background: none; text-align: left; font-size: 14px; cursor: pointer; }
.menu .msr { color: var(--md-on-surface-variant); }
.menu hr { margin: 8px 0; border: 0; border-top: 1px solid var(--md-outline-variant); }

/* ---- 選んだリスト ---- */
.main {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  margin: max(8px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
  border-radius: 28px; background: var(--md-surface); overflow: hidden;
  --c: var(--md-primary);
}
.main__bar { padding: 0 8px; flex: none; }
.main__back { display: none; }
.main__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 24px 24px; }
.main__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 8px; }
.main__title { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.25; color: var(--c); overflow-wrap: anywhere; }
.main__count { font-size: 28px; font-weight: 700; color: var(--c); }
.done-bar { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--md-outline-variant); font-size: 13px; color: var(--md-on-surface-variant); }
.done-bar .text-btn { height: 32px; padding: 0 8px; color: var(--c); }

/* グループの見出し（日付・リスト） */
.group { margin: 18px 4px 4px; font-size: 17px; font-weight: 700; color: var(--gc, var(--md-on-surface)); }
.group small { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--md-on-surface-variant); }
.group.is-over { color: var(--md-error); }

/* タスク */
.task { position: relative; display: flex; align-items: flex-start; gap: 4px; padding: 4px 0 4px 0; border-bottom: 1px solid var(--md-outline-variant); }
.task.is-sub { margin-left: 40px; }
.task.is-new { animation: task-in .3s var(--md-emphasized); }
.task.is-leaving { animation: task-out .35s var(--md-emphasized) forwards; }
@keyframes task-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes task-out { to { opacity: 0; transform: translateX(16px); } }
.circle {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--tc, var(--c));
}
/* 丸は ::after で描く（::before は押したときの色の層。/toolbox/shared/m3.css の .m3-state） */
.circle::after {
  content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--md-outline); box-sizing: border-box;
  transition: background-color .2s linear, border-color .2s linear, box-shadow .2s linear;
}
.task.is-done .circle::after, .circle[aria-checked="true"]::after { border-color: currentColor; background: currentColor; box-shadow: inset 0 0 0 3px var(--md-surface); }
/* 完了にしたとき: 丸がぽんと弾む */
.task.is-checking .circle::after { animation: check-pop .38s cubic-bezier(.34, 1.4, .64, 1); }
@keyframes check-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.task__body { flex: 1; min-width: 0; padding: 10px 0 8px; }
.task__title { display: flex; gap: 6px; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; cursor: text; }
.task__prio { flex: none; color: var(--tc, var(--c)); font-weight: 700; }
.task.is-done .task__title { color: var(--md-on-surface-variant); }
.task__text:empty::before { content: attr(data-empty); color: var(--md-on-surface-variant); }
.task__notes { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-size: 13px; line-height: 18px; color: var(--md-on-surface-variant); }
.task__meta .msr { font-size: 15px; vertical-align: -3px; }
.task__meta .is-over { color: var(--md-error); font-weight: 500; }
.task__meta a { color: var(--md-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.task__listname { display: inline-flex; align-items: center; gap: 4px; }
.task__listname i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); }
.task__flag { margin-top: 12px; color: var(--flag); font-size: 20px; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }
.task .info { width: 40px; height: 40px; margin-top: 2px; color: var(--tc, var(--c)); opacity: 0; }
.task:hover .info, .task:focus-within .info { opacity: 1; }
@media (hover: none) { .task .info { opacity: 1; } }
.task__edit { width: 100%; padding: 0; border: 0; outline: 0; background: none; font-size: 16px; line-height: 24px; color: var(--md-on-surface); }
.task--new .circle::after { border-style: dashed; }

/* 入れている途中の、見つけた日付など */
.task__hint { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; color: var(--c); animation: task-in .25s var(--md-emphasized); }
.task__hint .msr { font-size: 15px; }
.task__memo { display: inline-flex; align-items: center; gap: 2px; color: var(--md-primary); text-decoration: none; }
.detail__memo { display: flex; }
.detail__memo .m3-btn .msr { font-size: 18px; }

/* ドラッグで並べ替え */
.tasks { position: relative; }
.task .drag { width: 36px; height: 40px; margin-top: 2px; color: var(--md-on-surface-variant); cursor: grab; touch-action: none; opacity: 0; }
.task:hover .drag, .task .drag:focus-visible { opacity: 1; }
@media (hover: none) { .task .drag { opacity: .7; } }
.task.is-dragging { position: relative; z-index: 3; background: var(--md-surface-container-high); border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: none; }
.task.is-dragging .drag { cursor: grabbing; opacity: 1; }
.drop-line { position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--c); opacity: 0; pointer-events: none; transition: top .12s ease; }
.drop-line.is-on { opacity: 1; }

/* カレンダー */
.cal { margin: 4px 0 8px; padding: 12px; border-radius: 24px; background: var(--md-surface-container-low); animation: task-in .3s var(--md-emphasized); }
.cal__head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.cal__title { flex: 1; margin: 0; text-align: center; font-size: 17px; font-weight: 700; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__wd { padding: 4px 0; text-align: center; font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); }
.cal__wd.is-sun { color: #dc2626; }
.cal__wd.is-sat { color: #2563eb; }
.cal__day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; padding: 6px 0; border: 0; border-radius: 14px; background: none; cursor: pointer; }
.cal__num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-variant-numeric: tabular-nums; }
.cal__day.is-other { opacity: .38; }
.cal__day.is-past .cal__num { color: var(--md-on-surface-variant); }
.cal__day.is-today .cal__num { background: var(--c); color: #fff; font-weight: 700; }
.cal__day[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.cal__dots { display: flex; align-items: center; gap: 3px; min-height: 8px; }
.cal__dots i { width: 6px; height: 6px; border-radius: 50%; }
.cal__dots small { font-size: 10px; color: var(--md-on-surface-variant); }
.cal__empty { margin: 12px 4px; font-size: 14px; color: var(--md-on-surface-variant); }

.new-btn {
  display: inline-flex; align-items: center; gap: 10px; flex: none; align-self: flex-start;
  margin: 4px 16px 12px; padding: 0 16px 0 10px; height: 48px; border: 0; border-radius: 24px; background: none; cursor: pointer;
  color: var(--c); font-size: 16px; font-weight: 700;
}
.new-btn .msr { font-size: 26px; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.new-btn[hidden] { display: none; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 16px; color: var(--md-on-surface-variant); text-align: center; }
.empty .msr { font-size: 48px; opacity: .5; }
.empty p { margin: 0; font-size: 14px; line-height: 22px; }

/* ---- くわしい情報（ダイアログ） ---- */
.detail { width: min(560px, 100%); text-align: left; }
.detail__body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; margin: 0 -24px; padding: 0 24px 4px; }
.detail__body > * { flex: none; } /* ダイアログの高さに合わせて縮まないように（中はスクロール） */
.detail .tbs-dialog__title { margin: 0 0 16px; }
.detail__group { border-radius: 16px; background: var(--md-surface-container-highest); overflow: hidden; }
.detail__row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 16px; }
.detail__row + .detail__row { border-top: 1px solid var(--md-outline-variant); }
.detail__row > .msr { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--rc, var(--md-primary)); color: #fff; font-size: 18px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20; }
.detail__label { flex: 1; min-width: 0; font-size: 16px; -webkit-user-select: none; user-select: none; }
.detail__label small { display: block; font-size: 12px; color: var(--md-primary); }
.detail__row input[type="date"], .detail__row input[type="time"], .detail__row select {
  height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--md-surface-container-high); color: var(--md-on-surface); font-size: 15px;
}
.detail__row--sub { padding-left: 12px; }
.detail__row--sub > .circle { width: 36px; height: 36px; }
.detail__row--sub > input[type="text"] { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 15px; }
.detail__hint { margin: 0; padding: 10px 16px; font-size: 12px; line-height: 18px; color: var(--md-on-surface-variant); }
.detail__hint .text-btn { height: 32px; margin-top: 4px; padding: 0 8px; }
.detail .tbs-seg { width: 100%; }
.detail .tbs-seg__btn { font-size: 13px; }
.detail .m3-field { border-radius: 16px; box-shadow: none; }
.detail .m3-field:focus-within { box-shadow: inset 0 0 0 2px var(--md-primary); }

/* リストの編集（色とアイコン） */
.list-edit { display: flex; flex-direction: column; gap: 16px; }
.list-edit__preview { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: var(--c); color: #fff; }
.list-edit__preview .msr { font-size: 38px; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 40; }
.list-edit__colors, .list-edit__icons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.list-edit__colors .tbs-swatch { width: 40px; height: 40px; }
.list-edit__icon { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--md-surface-container-highest); color: var(--md-on-surface-variant); cursor: pointer; }
.list-edit__icon[aria-checked="true"] { background: var(--c); color: #fff; }
.list-edit__icon .msr { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* /toolbox/ の見本（?embed） */
.is-embed .side, .is-embed .main__bar, .is-embed .new-btn { display: none; }
.is-embed .app { grid-template-columns: 1fr; padding: 0; }
.is-embed .main { margin: 0; border-radius: 0; }
.is-embed .main__scroll { padding-top: 24px; }

/* ---- せまい画面: 一覧と選んだリストを切りかえる ---- */
@media (max-width: 760px) {
  body { background: var(--md-surface-container-low); }
  .app { grid-template-columns: 1fr; padding: 0; }
  .side { padding-right: max(12px, env(safe-area-inset-right)); }
  .smart-card { background: var(--md-surface); }
  .main { display: none; margin: 0; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .app.is-list .side { display: none; }
  .app.is-list .main { display: flex; }
  .main__back { display: grid; }
  .main__scroll { padding: 0 16px 16px; }
  .snackbar { bottom: max(80px, env(safe-area-inset-bottom)); }
  /* くわしい情報: スマホでは画面いっぱい。中だけスクロールして、「削除」「完了」はいつも下に出しておく */
  .detail-scrim { padding: 0; align-items: stretch; overflow: hidden; }
  .detail-scrim .detail {
    width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; overflow: hidden;
    padding: max(16px, env(safe-area-inset-top)) 0 0;
  }
  .detail-scrim .detail .tbs-dialog__title { margin: 0 0 12px; padding: 0 16px; font-size: 20px; }
  .detail-scrim .detail__body { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0 16px 24px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .detail-scrim .detail .tbs-dialog__actions {
    flex: none; margin: 0; padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    background: var(--md-surface-container-high); box-shadow: 0 -1px 0 var(--md-outline-variant);
  }
  .detail-scrim .detail .tbs-dialog__actions .m3-btn { min-width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}