/* S3 書く（担当B）。値は tokens.css の変数だけ（直書きしない。ui-design 16-6.11）。
   ・本文の欄の見え方は、読む画面の本文（kit.css の .md）とそろえる（同じ書き方は同じ見た目。16-4.5）。
   ・本文の字は 16px 以上（iPhone の拡大を防ぐ）、行の高さは --lh-body（設定で 1.5〜1.9。16-5.6）。 */

/* 色: 字と線と印は --accent、面の塗り（済みの箱・選んだ範囲の地）は --accent-fill（tokens.css 第2版の分け方） */

/* 画面の高さは、いま見えている範囲（キーボードを除く）に合わせ、道具の帯をキーボードのすぐ上に置く（js/app.js の --app-h） */
.layer-screen > .screen-write { height: var(--app-h, 100%); margin-top: var(--app-top, 0px); }

.write-scroll { padding-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.write-title {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: var(--sp-2) 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-title);
}
.write-title::placeholder { color: var(--text-3); opacity: 1; font-weight: var(--fw-bold); }
.write-title:focus { outline: none; border-bottom-color: var(--focus); }
.write-title:focus-visible { outline: none; }
.write-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.write-field { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 40vh; }

/* ---------- 本文の欄（共通） ---------- */
.write-body {
  width: 100%;
  flex: 1 0 auto;
  font-size: max(16px, var(--fs-body));
  line-height: var(--lh-body);
  letter-spacing: var(--ls-note-body); /* 読む画面の本文（kit.css の .md）と同じ */
  color: var(--text);
}
/* そのまま見せる（素の textarea）: 中身に合わせて伸び、画面ごと送る */
.write-plain {
  min-height: 40vh;
  border: 0;
  background: transparent;
  resize: none;
  padding: var(--sp-2) 0;
  overflow: hidden;
}
.write-plain::placeholder { color: var(--text-3); opacity: 1; }
.write-plain:focus { outline: none; }

/* 整えて見せる欄（CodeMirror 6。js/screens/write/field.js） */
.write-live.cm-editor { background: transparent; font-family: var(--font); }
.write-live.cm-editor.cm-focused { outline: none; }
.write-live .cm-scroller { font-family: var(--font); line-height: var(--lh-body); letter-spacing: var(--ls-note-body); overflow: visible; flex: 1; }
.write-live .cm-content { padding: var(--sp-2) 0 var(--sp-5); min-height: 40vh; caret-color: var(--accent); }
.write-live .cm-line { padding: 0; }
.write-live .cm-cursor { border-left: 2px solid var(--accent); }
.write-live .cm-placeholder { color: var(--text-3); }
.write-live .cm-selectionBackground,
.write-live.cm-focused .cm-selectionBackground { background: color-mix(in srgb, var(--accent-fill) 32%, transparent) !important; }
.write-live .cm-content ::selection { background: color-mix(in srgb, var(--accent-fill) 32%, transparent); }
.write-plain::selection { background: color-mix(in srgb, var(--accent-fill) 32%, transparent); }

/* 見出し（読む画面の .md の h1〜h2 と同じ段、h3 からは本文の大きさの太字） */
.write-live .cm-md-h1, .write-live .cm-md-h2 { font-size: var(--fs-title); font-weight: var(--fw-heavy); line-height: var(--lh-ui); padding-top: var(--sp-2) !important; }
.write-live .cm-md-h3, .write-live .cm-md-h4, .write-live .cm-md-h5, .write-live .cm-md-h6 { font-weight: var(--fw-heavy); }
/* 太字: 日本語の書体に太い字形が無い端末でも太く見えるよう、太さに加えて字の縁を少し太らせる（今の欄で直したこと） */
.write-live .cm-md-strong { font-weight: calc(var(--fw-heavy) + 100); -webkit-text-stroke: 0.03em currentColor; paint-order: stroke fill; }
.write-live .cm-md-em { font-style: italic; }
.write-live .cm-md-del { text-decoration: line-through; color: var(--text-2); }
.write-live .cm-md-code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); border-radius: var(--r-s); padding: 0 var(--sp-1); }
.write-live .cm-md-codeblock,
.write-live .cm-md-fence { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding-left: var(--sp-2) !important; }
.write-live .cm-md-fence { color: var(--text-3); }
/* 本文のリンクは主の字に下線（色の役を増やさない。設計書 6.1） */
.write-live .cm-md-link { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }
.write-live .cm-md-mark { color: var(--text-3); }
.write-live .cm-md-bullet { display: inline-block; width: 1.2em; color: var(--text-2); font-weight: var(--fw-heavy); }
.write-live .cm-md-ordered { color: var(--text-2); }
.write-live .cm-md-ordered-w { display: inline-block; min-width: 1.4em; padding-right: var(--sp-1); }
/* 太字などの中にカーソルがあるとき、その中身に淡い地（中か外かが分かるように） */
.write-live .cm-md-here { background: color-mix(in srgb, var(--accent-fill) 16%, transparent); border-radius: var(--r-s); }
.write-live .cm-md-quote { box-shadow: inset 3px 0 0 var(--line-strong); padding-left: var(--sp-3) !important; color: var(--text-2); }
.write-live .cm-md-hr { display: inline-block; width: 100%; height: 0; border-top: 1px solid var(--line-strong); vertical-align: middle; }
/* チェック項目の箱（押すと済み。枠は 3:1 以上の --line-strong。16-5.7） */
/* inline-block と overflow: hidden で、箱の下の端を字の並びの基準にする（中の ✓ の印に引きずられて箱が下がらないように） */
.write-live .cm-md-task {
  display: inline-block;
  overflow: hidden;
  width: 22px;
  height: 22px;
  margin: 0 var(--sp-2) 0 0;
  vertical-align: -0.18em;
  text-align: center;
  line-height: 18px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-s);
  color: var(--on-accent);
  cursor: pointer;
}
.write-live .cm-md-task svg { display: inline-block; vertical-align: middle; }
/* 押す的は箱の周りまで広げてある（field.js の taskBoxAt。箱の左右と上下の少し外を押しても切り替わる） */
.write-live .cm-md-task.done { background: var(--accent-fill); border-color: var(--accent-fill); }
.write-live .cm-md-taskline.done { color: var(--text-2); }
/* 添付の札（［画像］など） */
.write-live .cm-md-att {
  display: inline-block;
  padding: 0 var(--sp-2);
  border-radius: var(--r-s);
  background: var(--press-bg);
  color: var(--text-2);
  font-size: var(--fs-small);
}

/* ---------- 道具の帯（キーボードの上。設定で上にも） ---------- */
.toolbar {
  flex: none;
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2) calc(var(--sp-1) + var(--safe-b));
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.write-toolbar .tool-btn:disabled { color: var(--text-3); opacity: 0.6; cursor: default; }
.write-toolbar .tool-btn:disabled:active { background: transparent; }
:root[data-toolbar="top"] .screen-write .toolbar { order: -1; border-top: 0; border-bottom: 1px solid var(--line); padding-bottom: var(--sp-1); }
:root[data-toolbar="top"] .screen-write .appbar { order: -2; }

/* 上の帯の状態の一言（保存の状態・文字数）。数字は等幅で揃える */
.write-state { font-variant-numeric: tabular-nums; }

/* ---------- 書式の窓 W3（印の下に言葉の格子。押すと当てる） ---------- */
/* 標準の文字では3列、文字を大きくすると2列（言葉を途中で折らない） */
.write-format-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(96px, 6.2em), 1fr)); gap: var(--sp-2); font-size: var(--fs-small); }
.write-format-btn {
  min-height: calc(var(--hit) + var(--sp-5));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-1);
  border: 0;
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--text);
}
.write-format-btn:active { background: var(--press); }
.write-format-icon { color: var(--accent); display: inline-flex; }
.write-format-label { font-size: var(--fs-small); line-height: var(--lh-ui); text-align: center; }

/* ---------- 定型文の窓 ---------- */
.write-template-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.write-template-name { font-size: var(--fs-body); }
.write-template-preview { color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-small); }
.write-template-input { min-height: calc(var(--hit) * 3); resize: vertical; line-height: var(--lh-body); }

/* ---------- 探して置き換える ---------- */
.write-replace-status { font-variant-numeric: tabular-nums; }