/* S1 メモ（一覧）（担当A）。値は tokens.css の変数だけ。行は iOS の inset grouped（kit.css の .group）。 */

/* 画面の骨組み: 左に一覧（帯・中身・下のボタン）、広い画面では右に読む画面 */
.screen-memos {
  flex-direction: row;
  /* この画面の寸法（押す的 --hit から作る。値の直書きをしない） */
  --split-list-w: clamp(calc(var(--hit) * 7), 38%, calc(var(--hit) * 9));
  --card-min: calc(var(--hit) * 3 * var(--fs));
  --select-mark: calc(var(--sp-5));
}
.memos-main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.memos-side { display: none; }
.screen-memos.is-split .memos-main { flex: 0 0 auto; width: var(--split-list-w); box-shadow: 0.5px 0 0 var(--line); }
.screen-memos.is-split .memos-side { display: flex; flex: 1; min-width: 0; height: 100%; flex-direction: column; }
.memos-side > .screen { height: 100%; }
.memos-side > .state { flex: 1; justify-content: center; }

.list-status { margin: 0 0 var(--sp-1); }
.list-status .statusline { padding-left: 0; }
.memo-list { display: flex; flex-direction: column; }
.memo-list > .group, .memo-list > .card-grid, .memo-list > .chat-stream { margin-bottom: var(--sp-5); }
.list-sentinel { height: 1px; }

/* 冒頭の文の行数（設定「冒頭の文の行数」。日時と冒頭は同じ段に続けて出す） */
.memo-row .row-sub { -webkit-line-clamp: var(--preview-lines, 2); }
.memo-row.no-preview .row-sub { -webkit-line-clamp: 1; }

/* 広い画面で右に出しているメモ（選んだ状態は強調の色の枠） */
.memo-list [aria-current="true"] .row-main { background: var(--press); }
.memo-list .card[aria-current="true"], .memo-list .post[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--accent); }

/* 日付へ飛んだ先を一瞬だけ知らせる */
@keyframes memo-flash { from { background: var(--press); } to { background: transparent; } }
.memo-list .is-flash { animation: memo-flash 1.6s var(--ease); border-radius: var(--r-m); }
.memo-list .row.is-flash .row-main { animation: memo-flash 1.6s var(--ease); }

/* ---------- 選ぶ（まとめての操作） ---------- */
.select-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--select-mark);
  height: var(--select-mark);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  color: var(--on-accent);
}
.select-mark.is-on { background: var(--accent-fill); box-shadow: none; }
.row-lead .select-mark { margin-left: var(--sp-2); }
.row.is-selected .row-lead { background: var(--press); }
.post-body .md input[type="checkbox"] { pointer-events: none; }
.card-title .select-mark, .post-head .select-mark { margin-right: var(--sp-1); }
.select-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  background: var(--bar);
  box-shadow: 0 -0.5px 0 var(--line);
}
.select-bar .tool-btn { flex: 0 0 auto; min-width: calc(var(--hit) * 2); padding: var(--sp-1) var(--sp-2); }
.select-bar .tool-btn.is-danger { color: var(--danger); }
.select-bar .tool-btn:disabled { opacity: 0.4; cursor: default; }
.select-gap { flex: 1; }
/* 選んでいる間は下の帯（場所）を出さない（下の操作の帯と取り違えない。iOS の選ぶの作法） */
.shell:has(.screen-memos.is-selecting) .tabbar { display: none; }

/* 下のボタンの帯 .fab-row は shell.css（全画面に共通） */

/* ---------- カード ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: var(--sp-2); }
.memo-list[data-cols="1"] .card-grid { grid-template-columns: 1fr; }
.memo-list[data-cols="2"] .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-1);
  min-height: var(--hit);
  padding: var(--sp-3);
  border: 0;
  border-radius: var(--r-group);
  background: var(--surface);
  text-align: left;
  line-height: var(--lh-ui);
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--dur-1) linear;
}
.card:active, .card.is-selected { background: var(--press); }
.card-title { display: flex; align-items: flex-start; gap: var(--sp-1); font-size: var(--fs-headline); font-weight: var(--fw-bold); }
.card-title > span:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-title .row-pin { margin-top: 2px; }
.card-snip { color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.card-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.card-when { margin-top: auto; color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); font-variant-numeric: tabular-nums; }

/* ---------- チャット ---------- */
.chat-stream { display: flex; flex-direction: column; gap: var(--sp-2); }
.post {
  position: relative;
  padding: var(--sp-3) var(--cell-x);
  border-radius: var(--r-group);
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur-1) linear;
}
.post:active, .post.is-selected { background: var(--press); }
.post-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-ui); font-variant-numeric: tabular-nums; }
.post-title { margin: 0 0 var(--sp-1); font-size: var(--fs-headline); font-weight: var(--fw-bold); line-height: var(--lh-ui); }
.post-body .md > :last-child { margin-bottom: 0; }
.post-body .md input[type="checkbox"] { opacity: 1; }
.post.is-clipped .post-body { max-height: calc(10 * var(--lh-body) * var(--fs-body)); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, var(--text) 80%, transparent); mask-image: linear-gradient(to bottom, var(--text) 80%, transparent); }
.post-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
/* 日付の区切り（真ん中の小さな札） */
.day-sep { display: flex; justify-content: center; margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-small); font-weight: var(--fw-normal); line-height: var(--lh-ui); }
.day-sep > span { padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--press-bg); color: var(--text-2); font-variant-numeric: tabular-nums; }
.memo-list > .day-sep:first-child { margin-top: 0; }

/* グループの色の印（カードとチャット。行は kit.css の .row.has-mark） */
.card.has-mark::before, .post.has-mark::before {
  content: "";
  position: absolute;
  left: 6px;
  top: var(--sp-3);
  bottom: var(--sp-3);
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--mark, var(--g-none));
}
:root[data-group-mark="dot"] .card.has-mark::before, :root[data-group-mark="dot"] .post.has-mark::before { width: 8px; height: 8px; left: 4px; bottom: auto; top: 17px; }
:root[data-group-mark="none"] .card.has-mark::before, :root[data-group-mark="none"] .post.has-mark::before { display: none; }

/* ---------- 日付へ飛ぶ（暦の窓） ---------- */
.cal { display: flex; flex-direction: column; gap: var(--sp-2); }
.cal-dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--text-2); }
.cal-note { margin: 0; display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }

/* ---------- キー操作の一覧 ---------- */
.key-list { display: flex; flex-direction: column; border-radius: var(--r-group); background: var(--surface); }
.key-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); min-height: var(--cell-h); padding: var(--sp-2) var(--cell-x); line-height: var(--lh-ui); }
.key-row + .key-row { box-shadow: inset 0 0.5px 0 var(--line); }
.key-row kbd { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--text-2); }