/* 素の CSS。ビルド工程を持たない（PWA を API と同じコンテナから配るための前提）。 */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #16181d;
  --muted: #6b7280;
  --line: #e5e7eb;
  --accent: #2563eb;
  --danger: #b91c1c;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111318; --fg: #e8eaee; --muted: #9aa1ad; --line: #2a2e37; --accent: #60a5fa; --danger: #f87171; }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0 16px env(safe-area-inset-bottom) 16px;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  /* iOS で入力欄に触れたとき勝手に拡大されないように 16px 以上を保つ。 */
}

header { display: flex; align-items: center; gap: 8px; padding: 12px 0; }
h1 { font-size: 20px; margin: 0; flex: 1; }
h2 { font-size: 17px; }

button {
  font: inherit; color: inherit; background: none;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  /* タップ目標は 44px 以上（iOS のガイドライン）。押し外しが多いと使われなくなる。 */
  min-height: 44px;
}
button.danger { color: var(--danger); border-color: var(--danger); }

input, textarea {
  width: 100%; font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 4px 0 12px;
}

label { display: block; font-size: 14px; color: var(--muted); }
.hint { color: var(--muted); font-size: 14px; }
.error { color: var(--danger); }

.status { color: var(--muted); font-size: 14px; min-height: 1.5em; margin: 8px 0; }
.status.error { color: var(--danger); }

#send-form { display: flex; gap: 8px; align-items: flex-start; }
#send-form textarea { flex: 1; }
#send-form button { white-space: nowrap; }

ul { list-style: none; margin: 0; padding: 0; }
li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  border-top: 1px solid var(--line); padding: 8px 0;
}
.item {
  grid-column: 1; text-align: left; border: none; padding: 4px 0; width: 100%;
  /* 長文は 3 行で切る。全文はコピーすれば手に入る。 */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; white-space: pre-wrap; word-break: break-word;
}
.item.copied { color: var(--accent); }
.meta { grid-column: 1; color: var(--muted); font-size: 12px; }
.remove { grid-column: 2; grid-row: 1 / span 2; border: none; color: var(--muted); }

footer { display: flex; gap: 8px; margin: 24px 0; }