/* 生成りの地に、自分の思索を左、他人の一節を右に置く。点と数は臙脂だ */
:root {
  --paper: #FBFAF5; --ink: #1F1D1B; --sub: #5E5852; --mu: #8A837C; --faint: #B5AFA6;
  --ac: #9B2D3B; --wn: #5F8A92; --rule: #E8E5DA; --field: #ffffff;
  --lit: #F2B632; --lit-edge: #B9861A;
  --sans: "Jost", "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  /* 本文は明朝。名前・時刻・道具などの見出しの類はゴシックのまま */
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #1E1D1A; --ink: #ECE8E0; --sub: #BDB7AD; --mu: #9A958C; --faint: #6A665F; --ac: #D98A94; --wn: #8FB8BF; --rule: #2E2C29; --field: #24231F; --lit: #F5C44E; --lit-edge: #F5C44E; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* 本文は15px・行間1.95・字間を少し開ける。和文は詰めずに組む */
body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.95; letter-spacing: .03em; -webkit-font-smoothing: antialiased; font-synthesis: none; line-break: strict; text-wrap: pretty; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* 本文のリンクは臙脂 */
#line p a { color: var(--ac); text-decoration: none; overflow-wrap: anywhere; }
#line p a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 頭に > を添えて、リンクだとすぐわかるようにする。画面だけの印で、投稿の文には入らない */
#line p a.url::before { content: ">\00a0"; color: var(--ink); }
/* ハッシュタグとキャッシュタグ。窓の印と同じ青緑で、少し小さく */
#line p a.tag { color: var(--wn); font-size: .92em; }
svg.i { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; display: block; }

#page { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
#line { max-width: 640px; margin: 0 auto; padding: 72px max(24px, env(safe-area-inset-left)) calc(140px + 3vh); }

/* 上の蛇腹と設定 */
.top { position: fixed; top: 12px; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 3; }
.zz { pointer-events: auto; border: 1px solid var(--rule); background: var(--paper); border-radius: 999px; padding: 3px 14px; color: var(--ink); }
.zz svg { width: 22px; height: 12px; }
/* 右上。いまの天気と窓の印 */
.tr { position: fixed; top: 12px; right: max(14px, env(safe-area-inset-right)); z-index: 3; display: flex; align-items: center; gap: 12px; background: var(--paper); border-radius: 999px; padding: 0 0 0 8px; }
.wx { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mu); font-variant-numeric: tabular-nums; }
.wx svg { width: 16px; height: 16px; }
.gear { color: var(--mu); padding: 6px; }
.gear:hover { color: var(--mu); }
/* 思索だけ。入れると臙脂になる */
.only { position: fixed; top: 12px; left: max(14px, env(safe-area-inset-left)); z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); border: 1px solid transparent; border-radius: 999px; padding: 3px 10px; background: var(--paper); }
.only svg { width: 16px; height: 9px; }
.only:hover { color: var(--mu); }
.only.on { color: var(--ac); border-color: var(--rule); }
.only.back { text-decoration: none; color: var(--mu); }

/* 時刻は押すと固定ページが開く */
a.stamp { color: inherit; text-decoration: none; }
a.stamp:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 固定ページ：返信先の親と、引いた思索の見出し */
.r.parent { opacity: .75; margin-bottom: 24px; }
.sect { font-size: 12px; color: var(--mu); border-top: 1px solid var(--rule); padding-top: 14px; margin: 8px 0 24px; }

/* 名前の行と出所の印 */
.nm { font-size: 12px; letter-spacing: .02em; line-height: 1.6; color: var(--mu); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.nm b { font-weight: 500; color: var(--ink); font-size: 13px; }
.tg { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.tg i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; border: 1.5px solid currentColor; }
.tg.own i { background: currentColor; }
.tg.on { text-decoration: underline; text-underline-offset: 3px; }

#line p, .cap textarea { font-family: var(--serif); }
/* 段落は字下げせず、あいだを0.6em 空ける。二字下げは試したが、短い投稿が続くと行頭がずれて読みにくかった（2026-10-27） */
#line { --para: .6em; }
#line .ind { display: none; }
/* 明朝の本文は行間1.85（2026-10-27、moja.blue と決めた） */
#line p { line-height: 1.85; }
/* 明朝は14px。名前（13px）より本文が目立ちすぎないように（2026-10-27） */
.l p { font-size: 14px; }
#line .gap { display: block; height: var(--para); }
.ctx { font-family: var(--sans); }

/* まとまりの区切り。頭に細い罫線を1本 */
#line > hr.sep { border: 0; border-top: 1px solid var(--rule); margin: 0 0 28px; }

/* 右の一節 */
.r { margin: 0 0 28px auto; max-width: 86%; }
.r .nm { justify-content: flex-end; }
.r p { margin: 0 0 var(--para); color: var(--sub); font-size: 13.5px; user-select: text; white-space: pre-wrap; overflow-wrap: anywhere; }
.r .acts { justify-content: flex-end; }
.r.excerpt { margin-bottom: 14px; }

/* 左の思索 */
.l { margin: 0 0 28px; }
.l p { margin: 0 0 var(--para); white-space: pre-wrap; overflow-wrap: anywhere; }
.l p.edit-on { outline: 1px dashed var(--rule); outline-offset: 4px; }
.l p.pick { outline: 1px dashed var(--mu); outline-offset: 4px; border-radius: 2px; cursor: pointer; }
.l p.pick:hover { outline-color: var(--ac); }
.mod { display: block; font-size: 11px; color: var(--faint); margin: -10px 0 14px; cursor: pointer; }
.old { font-size: 12px; color: var(--faint); border-left: 1px solid var(--rule); padding-left: 10px; margin: -4px 0 10px; }
.old div { margin-bottom: 4px; }

.acts { display: flex; gap: 20px; align-items: center; color: var(--mu); margin-top: 4px; }
.acts button { display: inline-flex; align-items: center; gap: 6px; }
.acts button:hover { color: var(--ink); }
/* 数の幅は3桁ぶん取っておく。桁が増えても次の印の位置が動かないように */
.acts em { font-style: normal; font-size: 12px; color: var(--ac); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: left; }
.acts .word { font-size: 12px; }
.bulb circle { transition: fill .15s; }
/* 灯った電球は山吹色。生成りの地で縁が消えないように、縁だけ濃くする */
.bulb.on { color: var(--lit-edge); }
.bulb.on circle { fill: var(--lit); }

/* 折り目 */
.fold { display: flex; align-items: center; gap: 10px; color: var(--mu); font-size: 12px; margin: 0 0 36px; cursor: pointer; }
.fold svg { width: 18px; height: 10px; color: var(--ink); }

/* 書く欄 */
/* 書く欄は画面の縁から離す。下に 3vh（最低28px）あける */
.dock { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px max(16px, env(safe-area-inset-left)) max(28px, 3vh, calc(env(safe-area-inset-bottom) + 12px)); background: linear-gradient(transparent, var(--paper) 30%); z-index: 2; }
.dock > div { max-width: 640px; margin: 0 auto; }
.ctx { display: flex; justify-content: flex-end; align-items: flex-start; gap: 8px; margin: 0 6px 8px auto; max-width: 78%; color: var(--mu); font-size: 13px; }
.ctx.left { justify-content: flex-start; margin-left: 6px; max-width: none; }
.ctx button.quit { color: var(--ac); font-size: 12px; border: 1px solid var(--rule); border-radius: 999px; padding: 0 10px; background: var(--paper); flex: none; }
.cap { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--rule); background: var(--field); border-radius: 22px; padding: 8px 8px 8px 18px; }
.cap textarea { flex: 1; border: 0; outline: 0; resize: none; background: none; color: var(--ink); font: inherit; font-family: var(--serif); font-size: 14px; line-height: 1.6; max-height: 40vh; padding: 2px 0; }
.cap .send { width: 28px; height: 28px; border-radius: 50%; background: var(--ac); color: #fff; display: grid; place-items: center; flex: none; }
.cap .send[hidden] { display: none; }
.cap .count { font-size: 11px; color: var(--faint); align-self: center; font-variant-numeric: tabular-nums; }
.cap .count.over { color: var(--ac); }

/* 入口と設定 */
/* ATOMO のログイン画面。輪の青は ATOMO の印なので、ほかのアプリと同じ色にする */
.gate { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px 28px 60px; font-family: var(--sans); }
.gate .icon { width: 72px; height: 72px; }
.gate h1 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: .02em; }
.gate .note { margin: 0; max-width: 300px; font-size: 12.5px; line-height: 1.7; color: var(--mu); text-align: center; line-break: strict; }
.gate form { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 12px; }
.gate .lab { font-size: 12px; color: var(--mu); text-align: center; margin-bottom: -4px; }
.gate input { height: 44px; border: 1px solid var(--rule); border-radius: 22px; background: var(--field); color: var(--ink); padding: 0 18px; font: inherit; font-size: 16px; outline: none; text-align: center; }
.gate input:focus { border-color: var(--faint); }
.gate .go { height: 46px; border-radius: 23px; border: 1px solid var(--rule); background: var(--field); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-size: 15px; cursor: pointer; }
.gate .go:disabled { opacity: .5; cursor: default; }
.gate .err { min-height: 1.4em; font-size: 12.5px; color: var(--ac); text-align: center; }
.gate .err small { display: block; margin-top: 4px; font-size: 11px; opacity: .75; overflow-wrap: anywhere; }
.gate .what { font-size: 12.5px; color: var(--mu); }
.atomo { --glow: #3d8bff; position: relative; width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--glow), 0 0 6px rgba(61, 139, 255, .45); overflow: hidden; }
.atomo img { position: absolute; inset: 3px; width: 22px; height: 22px; border-radius: 50%; }
.atomo.busy { animation: atomo-breath 1.25s ease-in-out infinite; }
@keyframes atomo-breath {
  0%, 100% { box-shadow: 0 0 0 2px rgba(61, 139, 255, .45), 0 0 3px rgba(61, 139, 255, .2); }
  50% { box-shadow: 0 0 0 2px var(--glow), 0 0 12px rgba(61, 139, 255, .75); }
}
input.f, textarea.f { width: 100%; border: 1px solid var(--rule); background: var(--field); color: var(--ink); border-radius: 10px; padding: 8px 12px; font: inherit; }
.btn { border: 1px solid var(--rule); border-radius: 999px; padding: 6px 16px; background: var(--field); }
.btn.main { background: var(--ac); color: #fff; border-color: var(--ac); }
.sheet { position: fixed; inset: 0; background: var(--paper); z-index: 5; overflow-y: auto; }
.sheet > div { max-width: 480px; margin: 0 auto; padding: 56px 22px 40px; display: grid; gap: 14px; }
.sheet h2 { font-size: 15px; font-weight: 500; margin: 8px 0 0; }
.sheet .w { border-top: 1px solid var(--rule); padding-top: 10px; display: grid; gap: 6px; }
.sheet .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sheet small { color: var(--mu); }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 6px 16px; font-size: 12px; z-index: 6; }

/* 窓の設定。窓ごとの枠に、人・語・フィードの3段 */
.sheet .head { margin-bottom: 4px; }
.sheet .lead { color: var(--mu); font-size: 13px; margin: 0 0 6px; }
.sheet .card { border: 1px solid var(--rule); border-radius: 14px; padding: 12px 16px 6px; background: var(--field); }
.sheet .ch { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sheet .wname { flex: 1; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); padding: 2px 0; outline: 0; border-bottom: 1px solid transparent; }
.sheet .wname:focus { border-bottom-color: var(--rule); }
.sheet .del { font-size: 12px; color: var(--faint); }
.sheet .del:hover { color: var(--ac); }
.sheet .wrow { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--rule); }
.sheet .wl { font-size: 12px; color: var(--mu); padding-top: 5px; }
.sheet .chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sheet .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 4px 1px 10px; }
.sheet .chip button { color: var(--faint); width: 18px; height: 18px; border-radius: 50%; line-height: 1; }
.sheet .chip button:hover { color: var(--ac); }
.sheet input.add { flex: 1; min-width: 180px; border: 0; background: none; padding: 4px 2px; font-size: 13px; outline: 0; }
.sheet .foot { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 12px; }
.sheet .foot button { color: var(--mu); }
.sheet .foot button:hover { color: var(--ink); }
.sheet hr.short { width: 48px; border: 0; border-top: 1px solid var(--rule); margin: 10px auto; }