/* =================================================================
   editor.css — ブログ編集ツールの画面だけの見た目。
   記事そのものはサイトの CSS（base / components / subpage）で出すので、ここには
   編集のための枠・ボタン・操作の部品だけを書く。値は base.css のトークンを使う。
   ボタンは文字で説明せず、絵（icons.js の Lucide）と短い名前で見せる。
   ================================================================= */

body { padding-bottom: var(--sp-12); }
[hidden] { display: none !important; }

/* 絵（data-icon に名前を書くと editor.js が中に svg を入れる） */
svg.ed-svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 上のバー */
.ed-bar {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--gap-page);
  background: var(--c-bg); border-bottom: 1px solid var(--c-line);
}
.ed-brand { font-weight: var(--fw-bold); margin-right: auto; }
.ed-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.ed-me { font-size: var(--text-ms); }

.ed-page { max-width: var(--maxw); margin-inline: auto; padding: var(--sp-7) var(--gap-page) 0; }
.ed-h1 { font-size: var(--text-title); font-weight: var(--fw-extrabold); color: var(--c-ink); line-height: 1.3; }
.ed-h2 { font-size: var(--text-3xl); font-weight: var(--fw-bold); }
.ed-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.ed-head .ed-h1 { margin-right: auto; }

/* ボタン・入力欄 */
.ed-btn {
  font: inherit; font-size: var(--text-base); font-weight: var(--fw-semibold); line-height: 1.6;
  padding: var(--sp-2) var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-bg); color: var(--c-text); cursor: pointer;
}
.ed-btn:hover { border-color: var(--c-blue); }
.ed-btn-main { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-on-accent); }
.ed-btn:disabled { opacity: 0.45; cursor: default; }
.ed-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font: inherit; font-size: var(--text-ms); font-weight: var(--fw-semibold);
  padding: 0; border: 0; background: none; color: var(--c-blue); cursor: pointer;
}
.ed-link:hover { text-decoration: underline; }
.ed-link .ed-svg { width: 16px; height: 16px; }
.ed-danger { color: var(--c-talk-red); }
.ed-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.ed-form label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--text-ms); font-weight: var(--fw-semibold); }
.ed-form input, .ed-form select, .ed-form textarea, .ed-more input, .ed-field {
  font: inherit; font-size: var(--text-md); font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-bg); color: var(--c-text);
}
.ed-form textarea { resize: vertical; line-height: 1.7; }
.ed-row { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
.ed-row-left { margin-right: auto; }
.ed-error { color: var(--c-talk-red); font-size: var(--text-base); font-weight: var(--fw-semibold); }
.ed-error:empty { display: none; }
.ed-sub { font-size: var(--text-ms); }
.ed-msg { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--c-surface-2); border-radius: var(--r-sm); font-size: var(--text-base); white-space: pre-line; }
.ed-card { margin-top: var(--sp-6); padding: var(--sp-5); border: 1px solid var(--c-line); border-radius: var(--r-md); }

.ed-login { max-width: 420px; }
.ed-login .ed-form { margin-top: var(--sp-6); }

/* 記事の一覧 */
.ed-posts { list-style: none; margin-top: var(--sp-6); border-top: 1px solid var(--c-line); }
.ed-posts:empty { border: 0; }
.ed-posts button {
  width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-4) 0; border: 0; border-bottom: 1px solid var(--c-line); background: none;
  font: inherit; text-align: left; cursor: pointer;
}
.ed-posts button:hover .blog-item-title { color: var(--c-blue); }
.ed-posts .blog-item-title { flex-basis: 100%; }
.ed-chip {
  font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 0 var(--sp-2);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
}
.ed-chip.is-done { background: var(--c-success); border-color: var(--c-success); color: var(--c-on-accent); }

/* アカウント */
.ed-users { list-style: none; margin-top: var(--sp-6); border-top: 1px solid var(--c-line); }
.ed-users li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); }
.ed-users b { margin-right: auto; }

/* 書く画面の道具。上のバーの下に貼り付く */
.ed-tools {
  position: sticky; top: var(--ed-bar-h, 0px); z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--gap-page);
  background: var(--c-surface); border-bottom: 1px solid var(--c-line);
}
.ed-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  min-width: 36px; height: 36px; padding: 0 var(--sp-2);
  font: inherit; font-size: var(--text-ms); font-weight: var(--fw-semibold);
  border: 0; border-radius: var(--r-sm); background: none; color: var(--c-text); cursor: pointer;
}
.ed-icon:hover:not(:disabled) { background: var(--c-surface-2); }
.ed-icon:disabled { opacity: 0.3; cursor: default; }
.ed-icon-blue { color: var(--c-blue); }
.ed-icon.ed-danger { color: var(--c-talk-red); }
.ed-sep { width: 1px; height: 20px; background: var(--c-line); margin-inline: var(--sp-2); }
.ed-state { display: inline-flex; align-items: center; gap: var(--sp-1); margin-left: auto; margin-right: var(--sp-2); font-size: var(--text-ms); }
.ed-state .ed-svg { width: 16px; height: 16px; color: var(--c-success); }
.ed-state.is-error { color: var(--c-talk-red); font-weight: var(--fw-semibold); }

/* 記事の頭（日付・タイトル・見出し画像） */
.ed-article { padding-top: var(--sp-4); }
.ed-date { font: inherit; font-family: var(--font-en); font-size: var(--text-ms); font-weight: var(--fw-semibold); color: var(--c-blue); border: 0; background: none; }
.ed-title {
  display: block; width: 100%; padding: 0; border: 0; background: none; resize: none; overflow: hidden;
  font: inherit; font-size: var(--text-title); font-weight: var(--fw-extrabold); color: var(--c-ink); line-height: 1.3;
}
.ed-title::placeholder { color: var(--c-line); }
.ed-date:focus, .ed-title:focus, [contenteditable]:focus { outline: none; }
.ed-pick {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; padding: var(--sp-5) 0;
  margin-top: var(--sp-6); border: 2px dashed var(--c-line); border-radius: var(--r-md);
  font: inherit; font-size: var(--text-base); font-weight: var(--fw-semibold); background: none; color: var(--c-text); cursor: pointer;
}
.ed-pick:hover { border-color: var(--c-blue); color: var(--c-blue); }
.ed-pick-small { padding: var(--sp-8) 0; margin-top: 0; }
.ed-under { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); }

/* ブロック。触ると右上に操作（上へ・下へ・この下に足す・削除） */
.ed-blocks { min-height: var(--sp-10); }
.ed-block { position: relative; }
.ed-blocks > .ed-block + .ed-block { margin-top: var(--sp-4); }
.ed-ctl {
  position: absolute; top: calc(-1 * var(--sp-8)); right: 0; z-index: 2;
  display: flex; gap: 2px; padding: 2px;
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-sm); box-shadow: var(--shadow-soft);
  visibility: hidden;
}
.ed-block:hover > .ed-ctl, .ed-block:focus-within > .ed-ctl { visibility: visible; }
.ed-ctl .ed-icon { min-width: 30px; height: 30px; }
.ed-ctl .ed-svg { width: 16px; height: 16px; }
@media (min-width: 1100px) {
  /* 広い画面では記事の左の余白に縦に並べる（文字に重ならない） */
  .ed-ctl { top: 0; right: calc(100% + var(--sp-3)); flex-direction: column; }
}

/* 書く所。空のときは何を書く所か薄く出す（editor.js が .is-empty を付ける） */
.ed-blocks [contenteditable] { position: relative; min-height: 1.8em; }
.ed-blocks .is-empty::before {
  content: attr(data-ph); position: absolute; color: var(--c-line); pointer-events: none; white-space: nowrap;
  font-family: var(--font-ja); font-size: var(--text-md); font-weight: var(--fw-medium); letter-spacing: 0; line-height: 1.8;
}
.ed-blocks .talk-say { min-width: 4em; }

/* 発言: 丸を押すと話す人を選べる */
.ed-blocks .talk-who { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.ed-blocks .talk-who:hover .talk-icon { box-shadow: 0 0 0 3px var(--c-surface-2); }
.ed-pop {
  position: absolute; z-index: 5; min-width: 200px; padding: var(--sp-2);
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
}
.ed-pop button {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-2);
  font: inherit; font-size: var(--text-base); text-align: left; border: 0; border-radius: var(--r-sm); background: none; color: var(--c-text); cursor: pointer;
}
.ed-pop button:hover, .ed-pop button.is-on { background: var(--c-surface-2); }
.ed-pop .talk-icon, .ed-add .talk-icon { --talk-icon: 32px; flex: none; }
.ed-pop hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-1) 0; }
.ed-pop .ed-svg { margin-inline: 7px; }

.ed-blocks .blog-linkcard { cursor: default; }
.ed-blocks .archive-year.is-empty { min-width: 3em; }
.ed-fields { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ed-fields .ed-field { width: 100%; font-size: var(--text-base); }
.ed-blocks .info-row { align-items: flex-start; }
.ed-blocks .info-row dd { flex: 1; }
.ed-blocks .info-row .ed-icon { min-width: 28px; height: 28px; visibility: hidden; }
.ed-blocks .info-row:hover .ed-icon { visibility: visible; }

/* ブロックの上のすき間。マウスを乗せると線と「＋」が出る（押すとそこに足すメニューが開く） */
.ed-gap {
  position: absolute; left: 0; right: 0; top: calc(-1 * var(--sp-4)); height: var(--sp-4); z-index: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s ease;
}
.ed-gap::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--c-blue); }
.ed-gap:hover, .ed-gap:focus-within { opacity: 1; }
.ed-gap-btn {
  position: relative; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 50%; background: var(--c-blue); color: var(--c-on-accent); cursor: pointer;
}
.ed-gap-btn .ed-svg { width: 16px; height: 16px; }
.ed-add-pop { width: min(92vw, 460px); padding: var(--sp-3); }
.ed-add-pop button { width: 68px; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-2) 0; font-size: var(--text-xs); font-weight: var(--fw-semibold); text-align: center; gap: var(--sp-1); }

/* 足すメニュー。話す人の丸（押すとその人の発言が増える）と、ブロックの絵 */
.ed-add { margin-top: var(--sp-6); padding: var(--sp-3); border: 1px dashed var(--c-line); border-radius: var(--r-md); }
.ed-blocks > .ed-add { margin-block: var(--sp-4); }
.ed-add-who, .ed-add-kinds { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.ed-add-who { padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.ed-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  width: 68px; padding: var(--sp-2) 0;
  font: inherit; font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: 1.3;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--c-text); cursor: pointer;
}
.ed-tile:hover { background: var(--c-surface-2); }
.ed-tile .ed-svg { width: 22px; height: 22px; }
.ed-tile .talk-name { max-width: 100%; }
.ed-add-plus { display: grid; place-items: center; width: 32px; height: 32px; border: 2px dashed var(--c-line); border-radius: 50%; color: var(--c-text); }

.ed-more { margin-top: var(--sp-8); font-size: var(--text-base); }
.ed-more summary { cursor: pointer; font-weight: var(--fw-semibold); }
.ed-more label { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-3); font-size: var(--text-ms); font-weight: var(--fw-semibold); }
.ed-url { display: flex; align-items: center; gap: var(--sp-1); font-family: var(--font-en); font-weight: var(--fw-medium); }
.ed-url input { flex: 1; font-family: var(--font-en); }
.ed-more .ed-sub { margin-top: var(--sp-3); }
.ed-more .ed-danger { margin-top: var(--sp-5); }

/* ダイアログ */
.ed-dialog { width: min(92vw, 420px); margin: auto; padding: var(--sp-6); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.ed-dialog-wide { width: min(92vw, 720px); }
.ed-dialog::backdrop { background: color-mix(in srgb, var(--c-text) 35%, transparent); }
.ed-names:empty { display: none; }
.ed-names { display: grid; gap: var(--sp-2); }
.ed-names div { display: flex; align-items: center; gap: var(--sp-3); }
.ed-names .ed-field { width: 9em; }
.ed-sp-head { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.ed-sp-head .talk-icon { --talk-icon: 64px; }
.ed-sp-head .talk-name { max-width: none; font-size: var(--text-ms); }
.ed-colors { display: flex; gap: var(--sp-2); }
.ed-colors label { position: relative; cursor: pointer; }
.ed-colors input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ed-colors span { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--talk-c); border: 3px solid var(--c-bg); box-shadow: 0 0 0 1px var(--c-line); }
.ed-colors input:checked + span { box-shadow: 0 0 0 2px var(--c-ink); }
.ed-colors input:focus-visible + span { outline: 2px solid var(--c-blue); outline-offset: 2px; }