/* 投壜通信 — 既定は墨と和紙（遠目には白と黒）。色と書体はサイドバーから変えられる */

.ibm-plex-sans-jp-regular {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}

:root {
  --mincho: "IBM Plex Sans JP", "Noto Serif JP", "Noto Serif Japanese", "Noto Serif CJK JP", "Hiragino Mincho ProN", "HiraMinProN-W3", "Yu Mincho", YuMincho, serif;
  --gothic: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, sans-serif;

  /* 墨は本当は青黒く、紙は北窓の光の下でわずかに冷たい。
     遠目には白と黒のまま、平坦さだけが消える。 */
  --ink:   #15191e;   /* 墨   oklch(21% 0.012 255) */
  --paper: #f6f9fc;   /* 和紙 oklch(98% 0.005 250) */

  /* 藍。フォーカスと、壜が流れ着いた合図だけに使う（画面の3%以下） */
  --accent: #1a5998;  /* oklch(46% 0.12 252) */
  --focus:  #0d6abb;  /* oklch(52% 0.15 252) 紙に対して 5.15:1 */

  /* 下の6つは文字色と紙の色から作られる */
  --ink-mid:  color-mix(in srgb, var(--ink) 58%, var(--paper));
  --ink-weak: color-mix(in srgb, var(--ink) 34%, var(--paper));
  --rule:     color-mix(in srgb, var(--ink) 17%, var(--paper));
  --rule-soft:color-mix(in srgb, var(--ink) 8%,  var(--paper));
  --wash:     color-mix(in srgb, var(--ink) 5%,  var(--paper));
  --veil:     color-mix(in srgb, var(--paper) 88%, transparent);
  --select:   color-mix(in srgb, var(--accent) 20%, var(--paper));

  --fs: 20px;
  --lh: 2.0;
  --r: 9px;   /* 角の丸み */

  /* 動きの物理。Material 3 Expressive に倣い、秒数と曲線ではなくバネで決める。
     位置と大きさ（spatial）は少し行き過ぎて戻る。色と不透明度（effects）は行き過ぎない。
     いずれも減衰バネ x(t) を linear() に落としたもの。 */
  --dur-spatial: 440ms;   /* 剛性380・減衰比0.72 → 行き過ぎ3.8% */
  --spring-spatial: linear(0.0000, 0.0542, 0.1810, 0.3384, 0.4982, 0.6435, 0.7657, 0.8619, 0.9330, 0.9821, 1.0131, 1.0303, 1.0375, 1.0380, 1.0346, 1.0290, 1.0228, 1.0169, 1.0116, 1.0074, 1.0041, 1.0017, 1.0001, 0.9992, 1.0000);
  --dur-effects: 250ms;   /* 剛性600・臨界減衰 → 行き過ぎなし */
  --spring-effects: linear(0.0000, 0.0737, 0.2231, 0.3844, 0.5299, 0.6502, 0.7446, 0.8163, 0.8694, 0.9081, 0.9358, 0.9554, 0.9693, 0.9789, 1.0000);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--gothic);
  -webkit-text-size-adjust: 100%;
  /* 同梱しているのは400のみ。太字・斜体を機械で作らせない（和文が崩れるため） */
  font-synthesis: none;
}

/* 選んだところ。「残す」のための選択なので、藍を薄く敷く */
::selection { background: var(--select); }

/* ---------- キーボードで辿る人のための輪郭 ---------- */
/* 即時に出す。輪郭にトランジションをかけない（出るまでの間、居場所が消えるため） */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
button:focus-visible,
.seg button:focus-visible {
  outline-offset: 2px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 1px;
}
/* 本文は輪郭を紙の内側に寄せる（罫や原稿用紙の枠と喧嘩させない） */
#editor:focus-visible,
#ppPaper:focus-visible {
  outline-offset: 8px;
}
/* 帯・断片・系譜の節も辿れるようにする */
.pp-tab:focus-visible,
.side-tab:focus-visible,
.frag:focus-visible {
  outline-offset: -2px;
}
.tree-wrap .node:focus-visible rect {
  stroke: var(--focus);
  stroke-width: 2;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
}

.hidden { display: none !important; }

/* ---------- 全体の骨格 ---------- */
#shell {
  display: flex;
  height: 100%;
  width: 100%;
}
#shell.side-left { flex-direction: row-reverse; }

#stage {
  flex: 1 1 80%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

#sidebar {
  flex: 0 0 20%;
  min-width: 214px;
  max-width: 330px;
  border-left: 1px solid var(--rule);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  background: var(--paper);
  visibility: visible;
  transition:
    flex-basis  var(--dur-spatial) var(--spring-spatial),
    min-width   var(--dur-spatial) var(--spring-spatial),
    padding     var(--dur-spatial) var(--spring-spatial),
    border-width var(--dur-spatial) var(--spring-spatial),
    visibility 0s;
}
#shell.side-left #sidebar {
  border-left: none;
  border-right: 1px solid var(--rule);
}

/* たたんだサイドバー。帯とサイドバーが幅を受け渡すように動く */
.side-tab {
  display: flex;
  flex: 0 0 0px;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--rule);
  writing-mode: vertical-rl;
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--ink-mid);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  visibility: hidden;
  transition:
    flex-basis var(--dur-spatial) var(--spring-spatial),
    visibility 0s linear var(--dur-spatial);
}
.side-tab:hover { background: var(--wash); color: var(--ink); }
#shell.side-left .side-tab { border-left: none; border-right: 1px solid var(--rule); }

#shell.side-folded #sidebar {
  flex-basis: 0;
  min-width: 0;
  /* 内側の余白と罫も畳まないと、幅0にしても33pxぶん場所が残る */
  padding-left: 0;
  padding-right: 0;
  border-left-width: 0;
  border-right-width: 0;
  visibility: hidden;
  transition:
    flex-basis  var(--dur-spatial) var(--spring-spatial),
    min-width   var(--dur-spatial) var(--spring-spatial),
    padding     var(--dur-spatial) var(--spring-spatial),
    border-width var(--dur-spatial) var(--spring-spatial),
    visibility 0s linear var(--dur-spatial);
}
#shell.side-folded .side-tab {
  flex-basis: 34px;
  visibility: visible;
  transition:
    flex-basis var(--dur-spatial) var(--spring-spatial),
    visibility 0s;
}

/* たたんでいるあいだは、見出しの帯から投壜できる */
.seal-head {
  display: none;
  font-family: var(--mincho);
  font-size: 12px;
  padding: 4px 16px;
  letter-spacing: .24em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
}
.seal-head:hover { background: var(--paper); color: var(--ink); }
.seal-head:disabled { opacity: .3; }
#shell.side-folded .seal-head { display: inline-block; }

.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- 見出し帯 ---------- */
.stage-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 26px 12px;
  border-bottom: 1px solid var(--rule-soft);
}
.head-left, .head-right { display: flex; align-items: baseline; gap: 12px; }
.label { font-size: 12px; letter-spacing: .16em; }
.meta { font-size: 11px; color: var(--ink-mid); letter-spacing: .04em; }
.err { font-size: 12px; color: var(--ink); }

.stage-foot {
  flex: 0 0 auto;
  padding: 14px 26px 20px;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  align-items: center;
  gap: 16px;
}
.foot-note { font-size: 11px; color: var(--ink-mid); }

/* ---------- 紙 ---------- */
.paper-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 34px 26px 60px;
}
.paper {
  font-family: var(--mincho);
  font-size: var(--fs);
  line-height: var(--lh);
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 36em;
  margin: 0 auto;
  min-height: 100%;
  caret-color: var(--ink);
  /* 罫線・原稿用紙（app.js が組み立てる） */
  background-image: var(--paper-grid, none);
  background-size: var(--paper-grid-size, auto);
  background-position: var(--paper-grid-pos, left top);
  background-repeat: repeat;
}
#editor.is-empty::before {
  content: attr(data-placeholder);
  color: var(--ink-weak);
}

/* 打っている最中はゴシック、確定すると明朝 */
#editor { font-family: var(--gothic); }
#editor .fixed { font-family: var(--mincho); }
/* 未確定の文字は、明朝のかたまりの中にあってもゴシックのまま */
#editor .composing { font-family: var(--gothic); }

/* 縦書き */
.paper-wrap.vertical {
  padding: 26px 34px 26px;
  writing-mode: vertical-rl;   /* 起点を右端に置く */
}
.vertical .paper {
  writing-mode: vertical-rl;
  max-width: none;
  max-height: 100%;
  height: 100%;
  min-height: 0;
  min-width: 100%;   /* 罫線・原稿用紙を紙いっぱいに敷く */
  margin: 0;
  font-feature-settings: "vpal" 1;
}

/* 差分表示 */
.paper .diff-add { border-bottom: 1px solid var(--ink); }
.paper .diff-del { color: var(--ink-weak); text-decoration: line-through; }

/* ---------- 執筆画面と、届いた壜の置き場 ---------- */
#writeBody {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;   /* 「重ねる」で押し出された本文側がはみ出さないように */
}
#writeBody.vertical-layout { flex-direction: row-reverse; }
/* 「重ねる」で届いた壜が幅いっぱいまで来られるように、本文側を縮められるようにする */
#editorWrap { min-width: 0; }

/* たたむ・並べる・重ねるは「幅」の三段階。同じ一つの性質が動くので、
   どの組み合わせで切り替えてもバネが繋がる */
#parentPane {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: var(--pp-w, 38%);
  min-width: 0;
  max-width: 100%;      /* 行き過ぎの分がはみ出さないように */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--rule);
  background: var(--paper);
  visibility: visible;
  transition:
    flex-basis var(--dur-spatial) var(--spring-spatial),
    visibility 0s;
}
#writeBody.vertical-layout #parentPane {
  border-right: none;
  border-left: 1px solid var(--rule);
}
.pp-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--wash);
}
.pp-title { font-size: 11px; letter-spacing: .18em; white-space: nowrap; }
.pp-head .meta { white-space: nowrap; }
.pp-head .tiny-seg { margin-left: auto; }
.pp-wrap { padding: 22px 20px 40px; }
/* 前面に出たときだけ本文の色が濃くなる。色なので行き過ぎないバネ */
#ppPaper {
  color: var(--ink-mid);
  transition: color var(--dur-effects) var(--spring-effects);
}

/* 幅を引っぱっている間だけバネを切る */
#writeBody.dragging #parentPane { transition: none; }

.pp-divider {
  flex: 0 0 7px;
  cursor: col-resize;
  background: transparent;
  position: relative;
}
.pp-divider::after {
  content: "";
  position: absolute;
  inset: 0 3px;
  background: transparent;
}
.pp-divider:hover::after { background: var(--rule); }

.pp-tab {
  display: flex;
  flex: 0 0 0px;
  visibility: hidden;
  transition:
    flex-basis var(--dur-spatial) var(--spring-spatial),
    visibility 0s linear var(--dur-spatial);
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--rule);
  writing-mode: vertical-rl;
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--ink-mid);
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}
.pp-tab:hover { background: var(--wash); color: var(--ink); }
#writeBody.vertical-layout .pp-tab { border-right: none; border-left: 1px solid var(--rule); }

/* たたむ */
#writeBody.mode-collapsed #parentPane {
  flex-basis: 0;
  visibility: hidden;
  transition:
    flex-basis var(--dur-spatial) var(--spring-spatial),
    visibility 0s linear var(--dur-spatial);
}
#writeBody.mode-collapsed .pp-divider { display: none; }
#writeBody.mode-collapsed.has-parent .pp-tab {
  flex-basis: 34px;
  visibility: visible;
  transition:
    flex-basis var(--dur-spatial) var(--spring-spatial),
    visibility 0s;
}

/* 並べる — flex-basis は #parentPane の既定（var(--pp-w)）のまま */

/* 重ねる。左（縦書きなら右）の藍の罫が「今日ここに流れ着いた」印 */
#writeBody.mode-front.has-parent #parentPane {
  flex-basis: 100%;
  border: none;
  border-bottom: 1px solid var(--ink);
  border-left: 2px solid var(--accent);
}
#writeBody.vertical-layout.mode-front.has-parent #parentPane {
  border-left: none;
  border-right: 2px solid var(--accent);
}
#writeBody.mode-front .pp-divider { display: none; }
#writeBody.mode-front.has-parent #ppPaper { color: var(--ink); }

/* 応答でないときは、置き場ごと消す */
#writeBody:not(.has-parent) #parentPane,
#writeBody:not(.has-parent) .pp-divider,
#writeBody:not(.has-parent) .pp-tab { display: none; }

/* ---------- 何も流れ着いていないとき ---------- */
#waitView { justify-content: center; align-items: center; }
.wait-inner { text-align: center; max-width: 30em; padding: 20px; }
.wait-mark {
  font-family: var(--mincho);
  font-size: 46px;
  margin: 0 0 18px;
  letter-spacing: .2em;
  color: var(--ink-weak);
}
.wait-text {
  font-family: var(--mincho);
  font-size: 17px;
  letter-spacing: .12em;
  margin: 0 0 16px;
}
.wait-sub {
  font-family: var(--mincho);
  font-size: 13px;
  line-height: 2.1;
  color: var(--ink-mid);
  margin: 0 0 30px;
}

/* ---------- ボタン ---------- */
button {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r);
  padding: 7px 15px;
  cursor: pointer;
  letter-spacing: .08em;
  transition: background .12s, color .12s;
}
button:hover { background: var(--ink); color: var(--paper); }
button.big {
  font-family: var(--mincho);
  font-size: 15px;
  padding: 11px 34px;
  letter-spacing: .3em;
  border-radius: 999px;
}
button.ghost { border-color: var(--rule); color: var(--ink-mid); }
button.ghost:hover { background: var(--wash); color: var(--ink); }
button.link {
  border: none;
  border-radius: 0;
  padding: 2px 0;
  background: none;
  color: var(--ink-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: .04em;
}
button.link:hover { background: none; color: var(--ink); }
button.tiny { font-size: 11px; }
button.seal {
  width: 100%;
  font-family: var(--mincho);
  font-size: 15px;
  padding: 12px 0;
  letter-spacing: .4em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
}
button.seal:hover { background: var(--paper); color: var(--ink); }
button:disabled { opacity: .35; cursor: default; }
button:disabled:hover { background: var(--paper); color: var(--ink); }

/* ---------- サイドバー ---------- */
.side-block { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.side-block.grow { min-height: 0; }
.side-block.bottom { margin-top: auto; gap: 10px; padding-top: 6px; }
.side-title {
  font-family: var(--mincho);
  font-size: 15px;
  letter-spacing: .34em;
}
.side-title.row-between {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.side-title.row-between button { letter-spacing: .04em; }
.side-label {
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-mid);
  margin-top: 4px;
}
.side-label.row-between { display: flex; justify-content: space-between; align-items: center; }
.seal-note { font-size: 10px; line-height: 1.8; color: var(--ink-mid); }

.seg {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
}
.seg button {
  flex: 1;
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--rule);
  padding: 6px 0;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-mid);
}
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--ink); color: var(--paper); }
.seg button:hover { background: var(--wash); color: var(--ink); }
.seg button.on:hover { background: var(--ink); color: var(--paper); }
.seg.tiny-seg { border-radius: 999px; flex: 0 0 auto; }
.seg.tiny-seg button {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 3px 10px;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* すべり子 */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--rule);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink);
  margin-top: -6px;
}
input[type=range]::-moz-range-track { height: 1px; background: var(--rule); }
input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink);
}

/* 取っておいた言葉 */
.keep-btn {
  width: 100%;
  font-size: 11px;
  padding: 6px 0;
  letter-spacing: .12em;
  border-color: var(--rule);
  color: var(--ink-mid);
}
.keep-btn:enabled { border-color: var(--ink); color: var(--ink); }
.keep-chip {
  position: fixed;
  z-index: 45;
  font-size: 11px;
  padding: 4px 12px;
  letter-spacing: .14em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--ink) 22%, transparent);
}
.keep-chip:hover { background: var(--paper); color: var(--ink); }

.frag-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  max-height: 34vh;
}
.frag-list.muted { max-height: 22vh; }
.frag {
  border-bottom: 1px dotted var(--rule);
  padding: 7px 0;
  font-family: var(--mincho);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-mid);
  cursor: pointer;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
}
.frag:hover { color: var(--ink); }
.frag .frag-time {
  font-family: var(--gothic);
  font-size: 9px;
  color: var(--ink-weak);
  letter-spacing: .08em;
  display: block;
  margin-bottom: 2px;
}
.frag .frag-x {
  position: absolute;
  top: 6px;
  right: 0;
  font-size: 11px;
  color: var(--ink-weak);
  opacity: 0;
}
.frag:hover .frag-x { opacity: 1; }
.frag-list.muted .frag { cursor: default; color: var(--ink-weak); }
.frag-empty {
  font-size: 10.5px;
  line-height: 1.9;
  color: var(--ink-weak);
  padding: 6px 0;
}

/* ---------- 管理者モード ---------- */
.admin-login { padding: 40px 26px; display: flex; flex-direction: column; gap: 10px; max-width: 22em; }
.admin-login input { border: 1px solid var(--rule); border-radius: var(--r); padding: 7px 10px; background: var(--paper); }
.admin-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.admin-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); padding: 0 26px; }
.admin-tabs .tab {
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 14px;
  font-size: 12px;
  color: var(--ink-mid);
  letter-spacing: .1em;
}
.admin-tabs .tab.on { border-bottom-color: var(--ink); color: var(--ink); }
.admin-tabs .tab:hover { background: var(--wash); color: var(--ink); }
.admin-pane { display: none; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 26px 40px; }
.admin-pane.on { display: block; }

.form { display: flex; flex-direction: column; gap: 12px; max-width: 34em; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--ink-mid); letter-spacing: .06em; }
.form label.inline { flex-direction: row; align-items: center; gap: 7px; }
.form input[type=text], .form input[type=password], .form input[type=number],
.form input[type=datetime-local], .form textarea, .form select {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 7px 10px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.form textarea { font-family: var(--mincho); font-size: 14px; line-height: 1.9; resize: vertical; }
.form button { align-self: flex-start; }
.form .row { display: flex; gap: 10px; }
.form .row.wrap { flex-wrap: wrap; }
.file-label { font-size: 11.5px; color: var(--ink-mid); }
hr { border: none; border-top: 1px solid var(--rule-soft); margin: 6px 0; }

.look-form input[type=color] {
  width: 54px; height: 30px; padding: 2px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--paper);
}
.look-form textarea { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.7; }

/* 一覧 */
table.bottles { border-collapse: collapse; width: 100%; font-size: 12px; }
table.bottles th, table.bottles td {
  border-bottom: 1px solid var(--rule-soft);
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}
table.bottles th { font-size: 10px; letter-spacing: .12em; color: var(--ink-mid); font-weight: 400; }
table.bottles td.excerpt { font-family: var(--mincho); color: var(--ink); max-width: 30em; }
table.bottles tr:hover { background: var(--wash); }
.rowbtns { display: flex; gap: 6px; white-space: nowrap; }
.rowbtns button { padding: 3px 10px; font-size: 11px; }

/* 系譜 */
.tree-head { margin-bottom: 10px; }
.tree-wrap { overflow: auto; border: 1px solid var(--rule-soft); border-radius: var(--r); background: var(--paper); }
.tree-wrap svg { display: block; }
.tree-wrap .node rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.tree-wrap .node.root rect { stroke-width: 2; }
.tree-wrap .node.pending rect { fill: var(--ink); }
.tree-wrap .node.pending text { fill: var(--paper); }
.tree-wrap .node text { font-family: var(--gothic); font-size: 10px; fill: var(--ink); }
.tree-wrap .node text.excerpt { font-family: var(--mincho); font-size: 11px; }
.tree-wrap .node { cursor: pointer; }
.tree-wrap .node:hover rect { fill: var(--wash); }
.tree-wrap path.link { fill: none; stroke: var(--ink-weak); stroke-width: 1; }
.tree-detail { margin-top: 14px; }
.tree-detail .detail-box { border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 16px; }
.tree-detail .detail-text {
  font-family: var(--mincho);
  font-size: 14px;
  line-height: 2;
  white-space: pre-wrap;
  margin: 10px 0;
  max-height: 40vh;
  overflow: auto;
}

/* ---------- 覆い ---------- */
.modal {
  position: fixed; inset: 0;
  background: var(--veil);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  padding: 20px;
}
.modal-box {
  border: 1px solid var(--ink);
  border-radius: calc(var(--r) + 3px);
  background: var(--paper);
  padding: 26px 30px;
  max-width: 28em;
  max-height: 90vh;
  overflow: auto;
}
.modal-box p { font-family: var(--mincho); font-size: 14px; line-height: 2; margin: 0 0 20px; }
.modal-row { display: flex; gap: 12px; justify-content: flex-end; }
.modal-box.wide { max-width: 46em; width: 86vw; }
.modal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.diff-paper { max-height: 62vh; overflow: auto; max-width: none; min-height: 0; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mincho);
  font-size: 13px;
  letter-spacing: .16em;
  padding: 10px 22px;
  border-radius: 999px;
  z-index: 60;
}

/* ---------- 小さい画面 ---------- */
.sidebar-toggle {
  display: none;
  position: fixed;
  right: 12px;
  bottom: 14px;
  z-index: 40;
  width: 44px; height: 44px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  align-items: center; justify-content: center;
  font-size: 18px;
  cursor: pointer;
}

/* ---------- 動きに弱い人のために ---------- */
/* バネを止める。トークンを潰すので、これ一箇所で全部に効く */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-spatial: 0.01ms;
    --dur-effects: 0.01ms;
    --spring-spatial: linear;
    --spring-effects: linear;
  }
  .toast { animation: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 820px) {
  #sidebar {
    position: fixed;
    inset: auto 0 0 0;
    max-width: none;
    max-height: 74vh;
    border: none;
    border-top: 1px solid var(--ink);
    border-radius: 16px 16px 0 0;
    z-index: 30;
    transform: translateY(101%);
    transition: transform var(--dur-spatial) var(--spring-spatial);
    padding-bottom: 26px;
  }
  #shell.side-open #sidebar { transform: translateY(0); }
  #shell.side-left #sidebar { border-right: none; border-top: 1px solid var(--ink); }
  .sidebar-toggle { display: flex; }
  /* 狭い画面では引き出しが受け持つので、たたむ帯は使わない。
     幅で畳む仕掛けもここでは解除する */
  #shell.side-folded #sidebar {
    display: flex;
    flex-basis: auto;
    min-width: 0;
    visibility: visible;
  }
  #shell.side-folded .side-tab,
  #shell.side-folded .seal-head { display: none; }
  #sideCollapse { display: none; }
  .stage-head { padding: 12px 16px 10px; }
  .paper-wrap { padding: 20px 16px 80px; }
  .admin-pane, .admin-tabs { padding-left: 16px; padding-right: 16px; }
  /* 狭い画面では「並べる」は成り立たないので重ねる */
  #writeBody.mode-split.has-parent #parentPane {
    position: absolute; inset: 0; z-index: 20; flex: 1 1 auto; border: none;
  }
  #writeBody.mode-split .pp-divider { display: none; }
}

/* ---------- アカウントの入口 ---------- */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.auth-box { width: 100%; max-width: 24em; text-align: center; }
.auth-mark {
  font-family: var(--mincho);
  font-size: 44px;
  letter-spacing: .2em;
  margin: 0 0 4px;
  color: var(--ink-weak);
}
.auth-title {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .34em;
  margin: 0 0 14px;
}
.auth-lead {
  font-family: var(--mincho);
  font-size: 13px;
  line-height: 2;
  color: var(--ink-mid);
  margin: 0 0 26px;
}
.auth-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-mid);
}
.auth-form input {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 9px 11px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
}
.auth-form .big { align-self: stretch; margin-top: 6px; }
.auth-hint { font-size: 10.5px; line-height: 1.8; color: var(--ink-weak); margin: 0; }
.auth-err { font-size: 12px; color: var(--ink); margin: 0; min-height: 1.2em; }
.auth-note {
  font-size: 10.5px;
  line-height: 1.9;
  color: var(--ink-weak);
  margin: 24px 0 0;
}

/* ---------- 投壜のあとの記録 ---------- */
.record-q {
  font-family: var(--mincho);
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 12px;
}
#recordDecided { margin-bottom: 18px; }
.record-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-mid);
  margin-bottom: 20px;
}
.record-note textarea {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 9px 11px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mincho);
  font-size: 14px;
  line-height: 1.9;
  resize: vertical;
}

/* 期間の表示 */
.period-line { font-size: 10.5px; line-height: 1.8; color: var(--ink-mid); }
.period-line b { font-weight: 400; color: var(--ink); }