/* 時間帯で移り変わる背景色。JS が --sky-top / --sky-bottom を更新し、ここで滑らかに補間する */
@property --sky-top    { syntax: '<color>'; inherits: true; initial-value: #f5f0e8; }
@property --sky-bottom { syntax: '<color>'; inherits: true; initial-value: #f2ede5; }

:root {
  /* 紙のような温かいオフホワイトと、墨のような暖色系の黒。
     純白/純黒の強コントラストを避け、目に刺さらず冷たくない2色。
     背景は時間帯でわずかに色を変えるが、文字は常に墨色。
     OS のダークモードには追従しない。 */
  --bg: #f5f0e8;
  --fg: #2b2723;
  /* 本文に使うインク。墨を少し薄め、ロゴやボタンと同じトーンに揃える */
  --ink: rgb(43 39 35 / 0.84);
  --sky-top: #f5f0e8;
  --sky-bottom: #f2ede5;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
  transition: --sky-top 2.5s ease, --sky-bottom 2.5s ease;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: transparent;
  color: var(--ink);

  /* 欧文は SF、和文は Hiragino Sans（macOS / iOS の標準）。他 OS は Noto Sans JP 等へ */
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Noto Sans JP", "Yu Gothic Medium", YuGothic, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 300;   /* Hiragino Sans W3。字面に抜けを作り、打ち込んだままの平板さを消す */
  line-height: 1.9;

  /* カーニング＋和文プロポーショナル字詰め（ツメ組み）。ツメた上で字間を広めに戻し、軽く見せる */
  font-kerning: normal;
  font-feature-settings: "kern" 1, "palt" 1;
  letter-spacing: 0.07em;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;

  /* 行頭・行末の約物の空きを詰める（対応ブラウザのみ） */
  text-spacing-trim: trim-start;
  text-autospace: normal;           /* 和文と欧文・数字の間に四分アキ（対応ブラウザのみ） */
  hanging-punctuation: allow-end;

  /* 改行は文節単位（対応ブラウザのみ）。禁則は厳格に */
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

html { background: var(--sky-top); }   /* 基調色は html に。body は透明にして下の空を見せる */

/* 画面に固定した空。スクロールしても動かない */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
}

main {
  max-width: 560px;
  min-height: 100dvh;
  margin: 0 auto;
  padding-block: 0 50vh;
  padding-inline: max(22px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-right));
}

/* 入力欄：上に固定。下の一覧はこの下に潜ってふわっと消える */
#composer {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding-top: max(22px, calc(env(safe-area-inset-top) + 12px));
  padding-bottom: calc(14px + 28px);   /* 下 28px はフェード領域 */
  /* 背景は後ろの空と同じグラデーションを画面高さで敷く。
     常に画面上端に張り付くので、後ろの空とぴったり重なる */
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom));
  background-size: 100% 100dvh;
  background-repeat: no-repeat;
  background-position: 0 0;
  /* 下端 28px を透過させ、一覧が入力欄の下に溶けて潜る */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
}

/* ロゴ：欠けていく月 + ワードマーク */
.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  color: var(--ink);
  opacity: 0.7;
  user-select: none;
  -webkit-user-select: none;
}
.wordmark {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1;
  font-feature-settings: "kern" 1;
}
.moon { display: block; flex: none; }
/* 影の円が右から滑り込み、満月 → 三日月（左側が残る = 下弦側の欠け方） */
.moon .shadow {
  cx: 34px;
  animation: wane 1.8s cubic-bezier(0.3, 0.7, 0.2, 1) 0.25s forwards;
}
@keyframes wane {
  to { cx: 17.5px; }
}
/* 入力欄 + 送信ボタン。ボタンは最終行の高さに揃う */
.row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

#input {
  display: block;
  flex: 1;
  min-width: 0;
  min-height: 1.8em;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.07em;
  overflow: hidden;
  caret-color: var(--ink);
}

#send {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 0 0.35em;   /* 行の下端からベースライン寄りへ */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  opacity: 0.18;
  transform: scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
#send:not(:disabled) { opacity: 1; transform: none; }
#send:not(:disabled):active { transform: scale(0.9); }
#send:focus-visible { outline: 1.5px solid var(--fg); outline-offset: 3px; }
#input::placeholder { color: var(--ink); opacity: 0.3; }
#input:focus::placeholder { opacity: 0.18; }

#list {
  list-style: none;
  margin: -10px 0 0;   /* 入力欄のフェード領域(28px)ぶん引き戻す。実質の間隔は 32px */
  padding: 0;
}

#list li {
  margin: 0 0 26px;
  transition: opacity 1s linear;
  user-select: none;
  -webkit-user-select: none;
  will-change: opacity;
}

/* 書いた日付と時刻。本文よりさらに小さく薄く */
#list .meta {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.6;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "kern" 1, "tnum" 1;
}

#list .text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 新規投稿の入場：高さ 0 から伸びつつ、上から沈み込む */
#list li.enter {
  overflow: hidden;
  transition:
    height 0.38s var(--ease),
    margin-bottom 0.38s var(--ease),
    opacity 0.42s ease-out 0.08s,
    transform 0.46s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  #list li, #list li.enter { transition: none; }
  .moon .shadow { animation: none; cx: 17.5px; }
  :root { transition: none; }
}