:root {
  --tt-text: #191919;
  --tt-grey: rgba(25, 25, 25, .4);
  --tt-line: rgba(25, 25, 25, .06);
  --tt-blue: #4772fa;
  --tt-red: #e03131;
  /* 優先度の色（本家のアイコンと同じ） */
  --p1: #4772fb;
  --p3: #faa80c;
  --p5: #d52b25;
  --tt-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, "Hiragino Sans", "Yu Gothic UI", Arial, sans-serif;
  --list-w: 520px;
}
/* ページ全体はスクロールさせない（Mac の表示エンジンでは端で全体が伸び縮みして、アプリごと動いて見えるため）。
   スクロールは一覧・部屋・詳細の中だけで起き、端に来ても外へ伝わらない */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--tt-font); color: var(--tt-text); background: #fff; }
.app[hidden] { display: none !important; }
.app { display: flex; height: 100%; }

/* ================= 一覧 ================= */
.tt {
  font-size: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  /* 一覧の幅は境目のドラッグで変わる。机の部屋が狭くなりすぎないよう上限をつける */
  .tt { width: min(var(--list-w), calc(100vw - 360px)); flex: none; border-right: 1px solid rgba(25,25,25,.08); }
  body.list-collapsed .tt, body.list-collapsed #list-grip { display: none !important; }
  #list-toggle { display: none; }
  body.list-collapsed #list-toggle { display: inline-block; }
  .tt-detail.offcanvas { --bs-offcanvas-width: min(var(--detail-w, 440px), calc(100vw - 240px)); }
}

/* 左右の欄の境目（つまみ）。マウスを乗せると青い線が出る */
.pane-grip { flex: none; width: 6px; margin: 0 -3px; position: relative; z-index: 20; cursor: col-resize; touch-action: none; }
.pane-grip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; background: transparent; transition: background .12s; }
.pane-grip:hover::after, .pane-grip.active::after { background: rgba(71,114,250,.7); }
.pane-grip-left { position: absolute; top: 0; bottom: 0; left: -3px; margin: 0; }
body.resizing-pane, body.resizing-pane * { cursor: col-resize !important; -webkit-user-select: none !important; user-select: none !important; }
/* しまう手前まで細くすると、しまうことが分かるよう薄くする */
.tt.will-collapse, .tt-detail.will-collapse { opacity: .4; }
.tt-head { flex: none; display: flex; align-items: center; padding: 18px 20px 10px; }
.tt-title { font-size: 20px; font-weight: 600; line-height: 28px; margin: 0; flex: auto; }
.tt-hide { flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: none; color: rgba(25,25,25,.4); font-size: 15px; }
.tt-hide:hover { background: rgba(25,25,25,.06); color: rgba(25,25,25,.75); }
.tt-add {
  flex: none; display: flex; align-items: center; gap: 6px;
  margin: 4px 20px 14px; padding: 0 6px 0 12px; height: 42px;
  background: rgba(25,25,25,.04); border: 1px solid transparent; border-radius: 8px; color: var(--tt-grey);
  transition: background .12s, border-color .12s;
}
/* 押すと本家と同じく白地に青い枠 */
.tt-add:focus-within, .tt-add.has-draft, .tt-add.menu-open { background: #fff; border-color: var(--tt-blue); }
.tt-add > input { flex: auto; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; color: var(--tt-text); }
.tt-add > input::placeholder { color: var(--tt-grey); }
/* 期日と優先度のボタンは、入力中か、何か選んであるときだけ出す */
.add-btn {
  display: none; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: rgba(25,25,25,.6); font-size: 13px;
}
.add-btn svg { width: 19px; height: 19px; }
.add-btn:hover, .add-btn.show { background: rgba(25,25,25,.06); }
.tt-add:focus-within .add-btn, .tt-add.has-draft .add-btn, .tt-add.menu-open .add-btn { display: inline-flex; }
.add-chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 12px; color: var(--tt-blue); }
.add-chip svg { width: 14px; height: 14px; color: var(--pc, rgba(25,25,25,.45)); }
.tt-body { flex: auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 40px 20px; }

.tt-sec { margin-bottom: 8px; }
.tt-sec-head {
  display: flex; align-items: center; gap: 6px; height: 34px; width: calc(100% + 16px);
  margin-left: -16px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left;
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
.tt-sec-head .bi { font-size: 10px; color: var(--tt-grey); width: 10px; transition: transform .15s; }
.tt-sec.closed .tt-sec-head .bi { transform: rotate(-90deg); }
.tt-sec.closed .tt-rows { display: none; }
.tt-sec-title { font-size: 14px; font-weight: 600; }
.tt-sec-count { font-size: 12px; color: var(--tt-grey); }

.tt-row { display: flex; align-items: center; height: 40px; position: relative; cursor: pointer; }
.tt-row.child { padding-left: 24px; }
.tt-row.selected { background: rgba(71,114,250,.08); border-radius: 6px; }
.tt-fold {
  position: absolute; left: -18px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; padding: 0; width: 16px; color: var(--tt-grey); font-size: 10px;
}
.tt-fold.open .bi { transform: rotate(90deg); }
.tt-row:hover { background: rgba(25,25,25,.03); border-radius: 6px; }
.tt-check {
  flex: none; width: 17px; height: 17px; margin: 0 10px 0 0; padding: 0;
  border: 0; background: transparent; color: var(--tt-grey);
  display: inline-flex; align-items: center; justify-content: center; border-radius: 4px;
}
.tt-check svg { width: 17px; height: 17px; }
.tt-check:hover { background: rgba(25,25,25,.06); }
.p1 { --pc: var(--p1); } .p3 { --pc: var(--p3); } .p5 { --pc: var(--p5); }
.tt-check.p1, .tt-check.p3, .tt-check.p5 { color: var(--pc); }
.tt-check.done { color: rgba(25,25,25,.3); }
.tt-check:disabled, .dt-date:disabled, .dt-flag:disabled { opacity: .45; cursor: default; }
/* キーボードで選んでいる所を見えるように */
.tt-row:focus-visible, .paper:focus-visible, .tt-sec-head:focus-visible { outline: 2px solid rgba(71,114,250,.8); outline-offset: 2px; }
.tt-line {
  flex: auto; min-width: 0; height: 100%;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--tt-line);
}
.tt-name { flex: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 21px; }
.tt-right { flex: none; display: flex; align-items: center; gap: 6px; font-size: 12px; padding-right: 8px; }
.tt-list { color: var(--tt-grey); }
.tt-note { color: var(--tt-grey); width: 14px; height: 14px; flex: none; }
.tt-date { color: var(--tt-blue); white-space: nowrap; }
.tt-date.overdue { color: var(--tt-red); }
.tt-tags { display: inline-flex; gap: 4px; }
.tt-tag { font-size: 12px; line-height: 18px; padding: 0 6px; border-radius: 9px; color: var(--tt-text); white-space: nowrap; }

/* 行にマウスを乗せたときだけ出る「机に置く」 */
.tt-put {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: none; border: 0; border-radius: 6px; padding: 2px 8px;
  background: #fff; color: var(--tt-blue); box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.tt-row:hover .tt-put, .tt-row:focus-within .tt-put { display: block; }
@media (hover: none) { .tt-put { display: block; } .tt-right { padding-right: 44px; } }

/* ================= 部屋 ================= */
.room {
  flex: auto; min-width: 0; overflow: auto; position: relative; overscroll-behavior: contain;
  /* 床：明るいグレーのタイルカーペット */
  background-color: #d9d6d0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 240px 240px, 160px 160px, 160px 160px;
  background-attachment: local;
}
.room-bar {
  position: sticky; top: 0; left: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; pointer-events: none;
}
.room-bar > * { pointer-events: auto; }
.room-bar .btn-light { background: rgba(255,255,255,.8); border-color: transparent; }
.room-canvas { position: relative; margin-top: -52px; }

/* 机の天板（上から見た木の机） */
.desk {
  position: absolute;
  border-radius: 8px;
  background-color: #b98a5c;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='600'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='.0025 .11' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .18  0 0 0 0 .08  1.5 0 0 0 -.62'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>"),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.06));
  background-size: 900px 600px, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 7px 0 #7a5233,              /* 手前の板の厚み */
    0 9px 2px rgba(0,0,0,.25),
    0 30px 40px -12px rgba(0,0,0,.35); /* 床に落ちる影 */
  touch-action: none;
}
.desk-empty {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(50,28,10,.55); pointer-events: none; text-align: center; padding: 20px;
}
/* 机の何もない所をつかんで動かせる */
.desk { cursor: grab; }
.desk.moving { cursor: grabbing; }

/* 机の大きさを変えるつまみ。机にマウスを乗せると見える */
.grip { position: absolute; z-index: 5; }
.grip-t, .grip-b { left: 16px; right: 16px; height: 12px; cursor: ns-resize; }
.grip-l, .grip-r { top: 16px; bottom: 16px; width: 12px; cursor: ew-resize; }
.grip-t { top: -6px; } .grip-b { bottom: -6px; }
.grip-l { left: -6px; } .grip-r { right: -6px; }
.grip-c { width: 18px; height: 18px; }
.grip-c.g-top { top: -9px; } .grip-c.g-bottom { bottom: -9px; }
.grip-c.g-left { left: -9px; } .grip-c.g-right { right: -9px; }
.grip-c.g-top.g-left, .grip-c.g-bottom.g-right { cursor: nwse-resize; }
.grip-c.g-top.g-right, .grip-c.g-bottom.g-left { cursor: nesw-resize; }
.grip::after {
  content: ""; position: absolute; inset: 3px; border-radius: 4px;
  background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  opacity: 0; transition: opacity .12s;
}
.grip-t::after, .grip-b::after { left: calc(50% - 22px); right: auto; width: 44px; top: 4px; bottom: 4px; }
.grip-l::after, .grip-r::after { top: calc(50% - 22px); bottom: auto; height: 44px; left: 4px; right: 4px; }
.grip-c::after { border-radius: 50%; inset: 4px; }
.desk:hover .grip::after, .desk.resizing .grip::after { opacity: 1; }
@media (hover: none) { .grip::after { opacity: 1; } }

/* ================= 紙 ================= */
.paper {
  position: absolute;
  width: 180px;
  min-height: 112px;
  padding: 12px 12px 34px;
  background: #fdfcf8;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.16);
  cursor: grab;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
  transform: rotate(var(--tilt, 0deg));
}
.paper:hover { z-index: 3; }
.paper-title { font-size: 15px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.paper-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; font-size: 12px; }
.paper-actions {
  position: absolute; left: 8px; right: 8px; bottom: 6px;
  display: flex; gap: 2px; justify-content: flex-end;
  opacity: 0; transition: opacity .12s;
}
.paper:hover .paper-actions, .paper:focus-within .paper-actions { opacity: 1; }
/* 共有で「見るだけ」のリストのタスクは、動かすボタンを出さない */
[data-readonly] .tt-put, [data-readonly] .paper-actions { display: none !important; }
[data-readonly] { cursor: default; }
@media (hover: none) { .paper-actions { opacity: 1; } }
.paper-actions button {
  border: 0; background: transparent; color: rgba(25,25,25,.55);
  width: 26px; height: 24px; border-radius: 4px; padding: 0; font-size: 14px;
}
.paper-actions button:hover { background: rgba(25,25,25,.07); color: var(--tt-text); }
.paper-actions [data-act="done"] { margin-right: auto; }
.paper-actions .tt-check svg { width: 16px; height: 16px; }
.desk .paper [data-act="desk"],
.paper.on-floor [data-act="floor"] { display: none; }

/* 床の紙は少し小さく、くたっとさせる */
.paper.on-floor {
  width: 150px;
  min-height: 90px;
  background: #f4f2ec;
  box-shadow: 0 1px 1px rgba(0,0,0,.10), 0 2px 5px rgba(0,0,0,.12);
}
.paper.on-floor .paper-title { font-size: 13px; font-weight: 500; }
.paper.sliding { transition: left .22s ease-out, top .22s ease-out; }
.paper.selected { outline: 2px solid rgba(71,114,250,.8); outline-offset: 2px; }
/* 優先度：紙の左の縁に色の線（高=赤・中=黄・低=青。なしは線なし） */
.paper.p1, .paper.p3, .paper.p5 { border-left: 5px solid var(--pc); }

/* ================= ドラッグ ================= */
.paper.lifted { visibility: hidden; }
.tt-row.lifted { opacity: .35; }
.ghost {
  position: fixed !important; z-index: 2000 !important; pointer-events: none; margin: 0;
  transform-origin: 0 0;
  transform: scale(var(--z, 1)) rotate(-1.5deg) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.3) !important;
}
.drop-on { outline: 3px dashed rgba(71,114,250,.7); outline-offset: 6px; }
/* 狭い画面で一覧が机に重なるとき、ドラッグを始めた瞬間に一覧を隠す（ふわっと消える時間を待たない） */
#list-pane.drag-hidden { visibility: hidden !important; transition: none !important; }
.tt.drop-on { outline-offset: -6px; }
body.dragging, body.dragging * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }
.tt-row { -webkit-user-select: none; user-select: none; }

/* ================= 中身（詳細） ================= */
.tt-detail { font-size: 14px; }
.dt-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--tt-line); }
.dt-bar .tt-check { margin: 0; }
.dt-date, .dt-flag {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 6px;
  border: 0; border-radius: 6px; background: transparent; font-size: 13px; color: var(--tt-blue);
}
.dt-date:hover, .dt-flag:hover, .dt-date.show, .dt-flag.show { background: rgba(25,25,25,.05); }
.dt-date svg, .dt-flag svg { width: 18px; height: 18px; }
.dt-date.overdue { color: var(--tt-red); }
.dt-date.none { color: var(--tt-grey); }
.dt-flag { color: rgba(25,25,25,.65); }
.dt-flag.p1, .dt-flag.p3, .dt-flag.p5 { color: var(--pc); }

/* 優先度メニュー（高・中・低・無） */
.prio { min-width: 150px; padding: 6px; border-radius: 10px; border-color: rgba(25,25,25,.08); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.prio button {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px;
  border: 0; border-radius: 6px; background: transparent; font-size: 14px; color: var(--tt-text);
}
.prio button:hover { background: rgba(25,25,25,.05); }
.prio svg { width: 18px; height: 18px; color: var(--pc, rgba(25,25,25,.45)); }
.prio .bi-check2 { margin-left: auto; color: var(--tt-blue); visibility: hidden; }
.prio button.current { color: var(--tt-blue); }
.prio button.current .bi-check2 { visibility: visible; }

/* 期日ポップアップ */
.dp { width: 236px; padding: 12px; border-radius: 10px; border-color: rgba(25,25,25,.08); box-shadow: 0 8px 24px rgba(0,0,0,.14); font-size: 13px; }
.dp button:not(.btn) { border: 0; background: transparent; color: var(--tt-text); }
.dp-quick { display: flex; justify-content: space-between; padding: 2px 4px 10px; }
.dp-quick button { width: 34px; height: 30px; border-radius: 6px; font-size: 18px; color: rgba(25,25,25,.7); display: inline-flex; align-items: center; justify-content: center; }
.dp-quick button:hover { background: rgba(25,25,25,.05); }
.dp-quick svg { width: 20px; height: 20px; }
.dp-head { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
.dp-head span { flex: auto; font-weight: 500; }
.dp-head button { width: 22px; height: 22px; padding: 0; font-size: 11px; color: var(--tt-grey); border-radius: 4px; }
.dp-head button:hover { background: rgba(25,25,25,.05); }
.dp-head [data-nav="0"] { font-size: 7px; }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.dp-week span { font-size: 11px; color: var(--tt-grey); padding: 2px 0; }
.dp-grid button { height: 28px; width: 28px; margin: 1px auto; padding: 0; border-radius: 50%; font-size: 12px; }
.dp .dp-grid button:hover { background: rgba(25,25,25,.06); }
.dp .dp-grid button.out { color: rgba(25,25,25,.3); }
.dp .dp-grid button.today { background: rgba(71,114,250,.12); color: var(--tt-blue); }
.dp .dp-grid button.sel, .dp .dp-grid button.sel:hover { background: var(--tt-blue); color: #fff; }
.dp-time { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 6px 2px; border-top: 1px solid var(--tt-line); color: rgba(25,25,25,.75); }
.dp-time input { margin-left: auto; border: 1px solid rgba(25,25,25,.12); border-radius: 6px; padding: 2px 6px; font-size: 12px; }
.dp-foot { display: flex; gap: 8px; margin-top: 8px; }
.dp-foot .btn { flex: 1; height: 32px; padding: 0; font-size: 13px; }
.dt-sep { width: 1px; height: 16px; background: rgba(25,25,25,.12); }
.dt-body { padding: 18px 22px; overscroll-behavior: contain; }
.dt-title { font-size: 18px; font-weight: 600; line-height: 1.5; margin: 0 0 12px; overflow-wrap: anywhere; }
.dt-content { line-height: 1.7; overflow-wrap: anywhere; }
.dt-content :last-child { margin-bottom: 0; }
.dt-content { cursor: text; min-height: 1.7em; border-radius: 6px; }
.dt-content:hover { background: rgba(25,25,25,.03); }
/* メモを書いているとき */
.dt-editor {
  display: block; width: 100%; min-height: 6em; resize: none; overflow: hidden;
  border: 0; outline: none; padding: 0; background: transparent;
  font: inherit; line-height: 1.7; color: var(--tt-text);
}
.dt-editor::placeholder { color: var(--tt-grey); }
.dt-content ul, .dt-content ol { padding-left: 1.3em; }
.dt-content img { max-width: 100%; }
.dt-empty { color: var(--tt-grey); }
.dt-items { margin-top: 14px; }
.dt-items:empty { display: none; }
.dt-item { display: flex; align-items: center; gap: 10px; min-height: 34px; border-bottom: 1px solid var(--tt-line); }
.dt-item .tt-check { margin: 0; }
.dt-item.done .dt-item-title { color: var(--tt-grey); text-decoration: line-through; }
.dt-foot svg { width: 16px; height: 16px; }
.dt-tags { flex-wrap: wrap; }
.dt-tagbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; }
.tt-tag-x { border: 0; background: none; padding: 0 0 0 4px; font-size: 12px; line-height: 1; color: rgba(25,25,25,.55); }
.tt-tag-x:hover { color: #d52b25; }
.dt-tag-add { border: 1px dashed rgba(25,25,25,.25); background: none; border-radius: 9px; padding: 0 8px; font-size: 12px; line-height: 18px; color: var(--tt-grey); }
.dt-tag-add:hover { color: var(--tt-text); border-color: rgba(25,25,25,.45); }
.dt-tag-add[hidden], .dt-tag-input[hidden] { display: none; }
.dt-tag-input { width: 140px; height: 22px; padding: 0 8px; font-size: 12px; border: 1px solid var(--tt-blue); border-radius: 9px; outline: none; }
.dt-foot { display: flex; align-items: center; gap: 6px; padding: 12px 18px; border-top: 1px solid var(--tt-line); font-size: 12px; color: var(--tt-grey); }
.dt-foot a { color: var(--tt-blue); text-decoration: none; }
.dt-place { background: rgba(25,25,25,.06); border-radius: 9px; padding: 0 8px; line-height: 18px; }
.dt-place:empty { display: none; }

/* ================= 狭い画面 ================= */
/* 狭い画面：横から滑り出す引き出しではなく、上のほうに浮いた小窓として出す */
@media (max-width: 991.98px) {
  .tt.offcanvas-lg, .tt-detail.offcanvas {
    bottom: auto;
    border: 1px solid rgba(25,25,25,.08) !important;
    border-radius: 12px;
    box-shadow: 0 14px 44px rgba(0,0,0,.24);
    transform: none !important;
    opacity: 0;
    transition: opacity .14s ease, visibility .14s;
  }
  .tt-detail.offcanvas {
    top: 52px; right: 12px; left: auto;
    width: min(400px, calc(100vw - 24px)); height: auto; max-height: min(72vh, calc(100vh - 64px));
  }
  .tt.offcanvas-lg.showing, .tt.offcanvas-lg.show:not(.hiding),
  .tt-detail.offcanvas.showing, .tt-detail.offcanvas.show:not(.hiding) { opacity: 1; }

  /* 本家の小窓と同じく、文字と行を少し詰める */
  .tt-head { padding: 12px 14px 6px; }
  .tt-title { font-size: 17px; }
  .tt-add { margin: 2px 14px 8px; height: 40px; }
  .tt-body { padding: 0 8px 12px 14px; min-height: 0; }
  .tt-sec { margin-bottom: 2px; }
  .tt-sec-head { height: 28px; margin-left: 0; width: 100%; }
  .tt-sec-title { font-size: 11px; font-weight: 400; color: var(--tt-grey); }
  .tt-sec-count { font-size: 11px; }
  .tt-row { height: 36px; font-size: 13px; }
  .tt-fold { left: -14px; }
  .tt-right { font-size: 11px; }
  .tt-list, .tt-note { display: none; }
  .dt-body { overflow-y: auto; }

  /* 一覧のカード：ふだんは横幅の半分ほど・高さは机に少しかかる所まで。動かしたり大きさを変えたりできる */
  .tt.offcanvas-lg {
    left: var(--card-x, 10px); right: auto; top: var(--card-y, 56px);
    width: var(--card-w, clamp(240px, 52vw, 480px)); height: var(--list-h, 40vh); max-height: none;
  }
  .tt.offcanvas-lg { padding-bottom: 10px; }
  .tt.offcanvas-lg .tt-body { padding-right: 12px; }
  .tt.offcanvas-lg .tt-head { cursor: move; -webkit-user-select: none; user-select: none; }
  .pane-grip { display: none; }
}

/* ================= 紙の中身の小窓（カーソルをしばらく置くと出る） ================= */
.peek {
  position: fixed; z-index: 1500; width: 280px; max-height: 340px; overflow: hidden;
  padding: 12px 14px; border-radius: 10px; background: #fff; color: var(--tt-text); font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(25,25,25,.06);
  pointer-events: none; animation: peek-in .12s ease-out;
}
@keyframes peek-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.peek-title { font-weight: 600; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.peek-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 12px; }
.peek-note { margin-top: 8px; line-height: 1.6; color: rgba(25,25,25,.85); max-height: 9.6em; overflow: hidden; overflow-wrap: anywhere; }
.peek-note :last-child { margin-bottom: 0; }
.peek-note ul, .peek-note ol { padding-left: 1.2em; margin-bottom: .4em; }
.peek-list { margin: 8px 0 0; padding: 0; list-style: none; font-size: 12px; }
.peek-list li { display: flex; gap: 6px; align-items: baseline; line-height: 1.6; }
.peek-list li.done { color: var(--tt-grey); text-decoration: line-through; }
.peek-more { margin-top: 4px; font-size: 11px; color: var(--tt-grey); }

/* ================= 起動直後 ================= */
/* 机の大きさと位置が決まるまでは、机・紙・一覧の中身を描かない（幅0の机で文字が縦に並んで見えるのを防ぐ） */
body.booting #canvas, body.booting #sections { visibility: hidden; }

/* ================= 一覧に戻す受け口（一覧が出ていないときは「一覧」ボタン） ================= */
/* 紙のドラッグ中だけ、ボタンを受け口らしく見せる。まわり12pxも当たりにする */
#list-toggle.shelf-target { position: relative; z-index: 1500; outline: 2px dashed rgba(71,114,250,.6); outline-offset: 2px; color: var(--tt-blue); background: #fff; }
#list-toggle.shelf-target::before { content: ""; position: absolute; inset: -12px; }
#list-toggle.drop-on { background: var(--tt-blue); color: #fff; outline-color: var(--tt-blue); transform: scale(1.08); }
.ghost.to-toggle { opacity: .35; transition: opacity .1s; }

/* ================= 設定（完了したときの音） ================= */
.prefs { width: 300px; padding: 4px 0; font-size: 13px; }
.prefs .form-label { margin-bottom: 4px; color: var(--tt-grey, #888); font-size: 12px; }
.prefs-sec { padding: 10px 14px; }
.prefs-sec + .prefs-sec { border-top: 1px solid rgba(25,25,25,.08); }
.prefs-h { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--tt-grey); }
.acct-name { font-weight: 600; }
.acct-email { color: var(--tt-grey); font-size: 12px; overflow-wrap: anywhere; }
.prefs-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.prefs-foot #delete-account { margin-left: auto; padding: 0; font-size: 12px; }
.delete-confirm { flex-basis: 100%; margin-top: 6px; padding: 8px; border-radius: 6px; background: #fdecea; font-size: 12px; }
.delete-confirm p { margin: 0 0 6px; }

/* つないだアプリの行（設定と、はじめての案内で使う） */
.conn-list { display: flex; flex-direction: column; gap: 6px; }
.conn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.conn-name { font-weight: 600; min-width: 96px; }
.conn-state { flex: auto; color: var(--tt-grey); font-size: 12px; }
.conn-row .btn { padding: 2px 10px; font-size: 12px; }

/* 詳細：題名は押すと書き換えられる。削除は机ToDo 自身のタスクだけ */
.dt-title[contenteditable="plaintext-only"] { cursor: text; outline: none; border-radius: 4px; }
.dt-title[contenteditable="plaintext-only"]:focus { box-shadow: 0 0 0 2px rgba(71,114,250,.35); }
.dt-delete { border: 0; background: none; color: var(--tt-grey); padding: 2px 6px; border-radius: 4px; }
.dt-delete:hover { color: #d52b25; background: rgba(213,43,37,.08); }
.dt-delete[hidden] { display: none; }

/* ================= ログイン ================= */
.login {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background-color: #d9d6d0;
  background-image: linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 160px 160px;
}
.login[hidden] { display: none; }
.login-card {
  width: min(380px, 100%); padding: 36px 32px 28px; text-align: center; background: #fdfcf8; border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 10px 30px rgba(0,0,0,.18); rotate: -.6deg;
}
.login-title { font-size: 30px; font-weight: 700; margin: 0 0 8px; letter-spacing: .04em; }
.login-lead { color: rgba(25,25,25,.65); margin-bottom: 26px; line-height: 1.7; }
.login-buttons { display: flex; flex-direction: column; gap: 10px; }
.login-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; font-weight: 600; border-radius: 8px; }
.login-btn[hidden] { display: none; }
.login-google { background: #fff; border: 1px solid #dadce0; color: #1f1f1f; }
.login-google:hover { background: #f7f8f8; border-color: #c7cacd; }
.login-apple { background: #000; color: #fff; border: 1px solid #000; }
.login-apple:hover { background: #222; color: #fff; }
.login-test { background: #fff7e0; border: 1px dashed #e0a800; color: #6b4e00; }
.login-note { margin: 12px 0 0; font-size: 12px; color: #8a6d00; }
.login-error { margin: 14px 0 0; color: #b42318; font-size: 13px; }
.login-legal { margin: 22px 0 0; font-size: 11px; color: rgba(25,25,25,.5); }
.login-legal a { color: inherit; }

/* ================= はじめての案内と使い方のツアー ================= */
.welcome { border: 0; border-radius: 10px; }
.welcome-title { font-size: 19px; font-weight: 700; margin: 4px 0 12px; }
.welcome-lead { margin: 0; line-height: 1.75; color: rgba(25,25,25,.75); }
.driver-popover.desk-tour { font-family: inherit; border-radius: 10px; max-width: 320px; }
.driver-popover.desk-tour .driver-popover-title { font-size: 15px; font-weight: 700; }
.driver-popover.desk-tour .driver-popover-description { font-size: 13px; line-height: 1.7; color: rgba(25,25,25,.8); }
.driver-popover.desk-tour .driver-popover-footer button { font-size: 12px; text-shadow: none; border-radius: 6px; padding: 4px 10px; }
.driver-popover.desk-tour .driver-popover-next-btn { background: var(--tt-blue); color: #fff; border-color: var(--tt-blue); }
/* 「やってみましょう」の手順：照らした所以外も触れる（暗い膜は押しても閉じない） */
body.tour-free .driver-overlay, body.tour-free .driver-overlay * { pointer-events: none !important; }
body.tour-free .driver-overlay { opacity: .45; } /* 運ぶ先（机など）も見えるよう、膜を薄くする */
.tour-try { margin-top: 8px; color: var(--tt-blue); font-weight: 600; font-size: 12px; }
/* やってほしい操作以外をしようとしたら、説明の小窓を小さく揺らす */
.driver-popover.tour-nudge { animation: tour-nudge .4s ease; }
@keyframes tour-nudge { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
/* 操作の手順の間は、設定・読み直し・絞り込みなどの関係ない部品は押せなくする */
body.tour-free .room-bar, body.tour-free #side, body.tour-free .tt-head, body.tour-free .tt-sec-head { pointer-events: none !important; }
body.tour-free .room-bar * , body.tour-free #side *, body.tour-free .tt-head * { pointer-events: none !important; }
.tour-try::before { content: "▶ "; }

/* ================= サイドバー（全て・今日・次の7日間・受信トレイ・リスト・タグ） ================= */
.tt-main { flex: auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.side { display: none; }
@media (min-width: 992px) {
  #list-pane.tt { flex-direction: row; }
  .side { display: block; width: 190px; flex: none; overflow-y: auto; overscroll-behavior: contain; padding: 14px 8px 24px; background: #fafafa; border-right: 1px solid rgba(25,25,25,.06); }
  body.side-off .side, body.side-narrow .side { display: none; }
  /* サイドバーが出ているときは、見出しのメニューは使わない */
  body:not(.side-off):not(.side-narrow) .view-btn { pointer-events: none; }
  body:not(.side-off):not(.side-narrow) .view-btn .bi { display: none; }
  body.side-narrow #side-toggle { display: none !important; }
}
.side-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 7px 10px; border-radius: 8px; font-size: 14px; text-align: left; color: var(--tt-text); }
.side-item:hover { background: rgba(25,25,25,.05); }
.side-item.active { background: rgba(71,114,250,.1); font-weight: 600; }
.side-ic { display: inline-flex; align-items: center; justify-content: center; width: 18px; flex: none; color: rgba(25,25,25,.6); }
.side-ic svg { width: 18px; height: 18px; }
.side-name { flex: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-count { flex: none; color: var(--tt-grey); font-size: 12px; }
.side-sep { padding: 14px 10px 4px; font-size: 12px; font-weight: 600; color: var(--tt-grey); }
.tag-dot { width: 9px; height: 9px; border-radius: 50%; }
.view-drop { flex: auto; min-width: 0; }
.view-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 0; background: none; padding: 0; font-family: inherit; color: inherit; text-align: left; }
.view-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-btn .bi { font-size: 12px; color: var(--tt-grey); }
.view-menu { min-width: 230px; max-height: 60vh; overflow-y: auto; padding: 6px; }
.view-menu .side-item { border-radius: 6px; }
.view-empty { margin: 0; padding: 32px 0; text-align: center; color: var(--tt-grey); font-size: 13px; }
.view-empty[hidden] { display: none; }