/*
 * library.css — 自由詩ライブラリの事典まわり。
 *
 * site.css（サイト全体）と editorial.css（固定ページ）に足す3枚目。
 * 詩人ページの2カラム、引用パネル、校正の欄、統計、書き出しをここに置く。
 * 色は既存のトークン（--ink / --bg-card / --line / --accent / --pf-gold）だけを使う。
 * 変数に寄せてあるので、ライト・ダークの切り替えは自動でついてくる。
 */

/* ── 2カラム（本文＋脇の事典情報）───────────────────────── */
.lit-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 2.5rem;
  align-items: start;
}
/* 幅が足りないときは1カラム。脇の情報は本文のあとへ回す
   （最重要の生没・出身は見出し直下の .poet-facts に出ているため）。 */
@media (max-width: 62rem) {
  .lit-columns { grid-template-columns: 1fr; gap: 1.5rem; }
}
.lit-col-main { min-width: 0; }
.lit-col-side { min-width: 0; display: grid; gap: 1.1rem; }

/* ── 3本柱（案内 / 本文 / 道具）─────────────────────────
   広い画面から順に、置ける柱を増やしていく。
     狭い      … 1列（案内は横並びのピル、道具は本文のあと）
     68rem〜   … 案内 ＋ 本文（道具は本文の下に、横並びのカードで）
     93rem〜   … 案内 ＋ 本文 ＋ 道具
   道具を先に降ろすのは、本文（34em）が痩せるのがいちばん困るから。
   本文と道具の両方を置ける幅（およそ1490px）に届いてから3本にする。 */
.lit-columns--library { grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 68rem) {
  .lit-columns--library { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.8rem 2rem; }
  .lit-columns--library .lit-col-side {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    align-items: start;
  }
}
@media (min-width: 93rem) {
  .lit-columns--library { grid-template-columns: 11rem minmax(0, 1fr) 22rem; }
  .lit-columns--library .lit-col-side { grid-column: auto; grid-template-columns: 1fr; }
}

/* 縦書きで読むあいだは、行が右から左へ伸びるぶん横幅そのものが読みやすさになる。
   案内は残したまま道具だけ下へ送り、画面を本文に明け渡す（既存の
   `.poem-part:has(.poem-body.is-vertical)` と同じ考え方）。 */
@media (min-width: 93rem) {
  .lit-columns--library:has(.poem-body.is-vertical) { grid-template-columns: 11rem minmax(0, 1fr); }
  .lit-columns--library:has(.poem-body.is-vertical) .lit-col-side {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  }
}

/* 一覧など、道具の柱を持たないページ（案内＋本文の2本柱）。 */
.lit-columns--index { grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 68rem) {
  .lit-columns--index { grid-template-columns: 11rem minmax(0, 1fr); gap: 1.8rem 2rem; }
}

/* ── 案内の柱 ─────────────────────────────────────
   狭い画面では横並びのピル。広い画面で縦の柱になり、スクロールについてくる。 */
.lib-rail { min-width: 0; font-size: .85rem; }
.lib-rail-title { margin: 0 0 .6rem; font-family: var(--serif); font-size: .95rem; }
.lib-rail-title a { color: var(--ink); }
.lib-rail-sections { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.lib-rail-sections a {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  padding: .3rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: .82rem;
}
.lib-rail-sections a:hover { color: var(--accent); border-color: var(--accent-soft); text-decoration: none; }
.lib-rail-sections a.is-current { color: var(--ink); font-weight: 700; background: var(--bg-card); border-color: var(--accent-soft); }
.lib-rail-count { color: var(--ink-soft); font-size: .74rem; font-variant-numeric: tabular-nums; }
/* 狭い画面では、現在地の階層はパンくずと重なるので出さない。 */
.lib-rail-here { display: none; }

@media (min-width: 68rem) {
  .lib-rail { position: sticky; top: 1.2rem; }
  .lib-rail-sections { display: block; }
  .lib-rail-sections li + li { margin-top: .15rem; }
  .lib-rail-sections a {
    justify-content: space-between;
    padding: .35rem .6rem;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
  }
  .lib-rail-sections a:hover { background: var(--bg-muted); }
  .lib-rail-sections a.is-current {
    background: var(--bg-card);
    border-left-color: var(--pf-gold);
    border-radius: 0 6px 6px 0;
  }
  .lib-rail-here { display: block; margin-top: 1.3rem; padding-top: .9rem; border-top: 1px solid var(--line); }
}
.lib-rail-here-title { margin: 0 0 .5rem; color: var(--ink-soft); font-size: .72rem; letter-spacing: .08em; }
.lib-rail-trail { list-style: none; margin: 0; padding: 0; }
.lib-rail-trail li { padding: .3rem 0 .3rem .8rem; border-left: 2px solid var(--line); line-height: 1.5; }
.lib-rail-trail li.is-current { border-left-color: var(--pf-gold); color: var(--ink); font-weight: 700; }
.lib-rail-kind { display: block; color: var(--ink-soft); font-size: .68rem; font-weight: 400; }
.lib-rail-note { margin: .7rem 0 0; color: var(--ink-soft); font-size: .76rem; font-variant-numeric: tabular-nums; }

/* 脇に置いた節の見出しは、本文の見出しより一段小さくする
   （.entry h2 の大きさのままだと、脇が主役に見える）。 */
.entry .lit-col-side h2 {
  margin: 0 0 .7rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}
.entry .lit-col-side h3 { margin: .9rem 0 .4rem; font-size: .9rem; }
.lit-col-side > .lit-side-card > *:first-child { margin-top: 0; }
.lit-col-side .lit-correct,
.lit-col-side .related-articles { margin: 0; }
.lit-col-side .lit-accuracy-note { margin: 0 0 1rem; }
.lit-col-side .lit-accuracy-note--inline { margin: 0 0 1rem; }
.lit-col-side .lit-meta-more { margin: 0; }
/* 幅が狭いので、書誌の表と入力欄を詰める。 */
.lit-col-side .lit-meta { margin: .8rem 0 0; font-size: .82rem; }
.lit-col-side .lit-meta th { width: 5.5em; padding: .35rem .5rem; }
.lit-col-side .lit-meta td { padding: .35rem .5rem; }
.lit-col-side textarea,
.lit-col-side input[type="text"] { width: 100%; }
.lit-col-side .lit-report-form,
.lit-col-side .lit-correct-form { gap: .7rem; }

.lit-side-card {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-card);
  font-size: .88rem;
}
.entry .lit-side-title {
  margin: 0 0 .7rem;
  padding: 0 0 .5rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 1rem;
}
.lit-side-card .lit-tags { margin: 0; }
.lit-side-card .lit-list { margin: 0; }
.lit-side-card .lit-list li { padding: .35rem 0; }

.lit-side-facts { display: grid; grid-template-columns: 5.5em 1fr; gap: .35rem .8rem; margin: 0; }
.lit-side-facts dt { color: var(--ink-soft); font-size: .8rem; }
.lit-side-facts dd { margin: 0; }

/* ── 詩人ページの頭（肖像＋名前＋略歴）───────────────────── */
.poet-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.poet-head-text { flex: 1 1 22rem; min-width: 0; }
.entry .poet-head-text h1 { margin-bottom: .3rem; }
.poet-facts { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .9rem; }
.poet-counts { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin: 0; }
.poet-counts a {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .25rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: .82rem;
}
.poet-counts a:hover { border-color: var(--accent-soft); color: var(--accent); text-decoration: none; }
.poet-counts b { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }

.poet-portrait {
  flex: 0 0 12rem;
  width: 12rem;
  margin: 0;
}
.poet-portrait img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  object-fit: cover;
}
.poet-portrait figcaption {
  margin-top: .4rem;
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1.5;
}
.poet-portrait-license { display: block; }
/* 肖像がまだ無い詩人のほうが多い。空白を残さず、頭文字の枠を置く。 */
.poet-portrait--placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-muted);
}
.poet-portrait-initial {
  font-family: var(--serif);
  font-size: 3.4rem;
  color: var(--ink-soft);
}
@media (max-width: 40rem) {
  .poet-portrait { flex-basis: 7rem; width: 7rem; }
  .poet-portrait-initial { font-size: 2.2rem; }
}

/* ── 詩集ごとの作品 ─────────────────────────────────── */
.poet-collection { margin: 0 0 1.8rem; }
.entry .poet-collection-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  margin: 1.4rem 0 .4rem;
  font-family: var(--serif);
  font-size: 1.15rem;
}
.poet-collection-meta { color: var(--ink-soft); font-size: .78rem; font-family: var(--sans); }
.poet-collection-desc { margin: 0 0 .5rem; color: var(--ink-soft); font-size: .85rem; }
.poet-featured { margin-bottom: 2rem; }

/* ── 年表 ───────────────────────────────────────── */
.poet-timeline { list-style: none; margin: 0; padding: 0; }
.poet-timeline li {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: .6rem;
  padding: .35rem 0;
  border-left: 2px solid var(--line);
  padding-left: .8rem;
}
.poet-timeline-year { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-size: .82rem; }
.poet-timeline-label { font-size: .85rem; }

/* ── 引用パネル ──────────────────────────────────── */
.lit-cite {
  margin: 2rem 0;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-card);
}
.lit-side-card .lit-cite { margin: 0; padding: 0; border: 0; background: none; }
.lit-cite-summary { cursor: pointer; font-weight: 700; font-size: .92rem; }
.lit-cite-body { margin-top: 1rem; }
.lit-cite-caution {
  margin: 0 0 1rem;
  padding: .6rem .8rem;
  border-left: 3px solid var(--pf-gold);
  background: var(--bg-muted);
  font-size: .82rem;
}
.lit-cite-item + .lit-cite-item { margin-top: 1.2rem; }
.lit-cite-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.entry .lit-cite-title { margin: 0; font-size: .9rem; }
.lit-cite-help { margin: .2rem 0 .4rem; color: var(--ink-soft); font-size: .76rem; }
.lit-cite-text {
  margin: 0;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-muted);
  font-size: .8rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lit-cite-foot { margin: 1rem 0 0; color: var(--ink-soft); font-size: .76rem; }
.lit-copy-btn {
  flex: 0 0 auto;
  min-height: 32px;
  padding: .25rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--accent);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.lit-copy-btn:hover { border-color: var(--accent-soft); }

/* ── 本文の校正 ──────────────────────────────────── */
.lit-correct { margin: 2.5rem 0; }
.lit-correct-lead { font-size: .9rem; }
.lit-quality-badge {
  display: inline-block;
  padding: .05rem .5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-muted);
  font-size: .78rem;
}
.lit-correct-mine { margin: 1rem 0; }
.entry .lit-correct-mine h3 { margin: 0 0 .5rem; font-size: 1rem; }
.lit-correct-list { list-style: none; margin: 0; padding: 0; }
.lit-correct-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .7rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.lit-correct-status {
  padding: .05rem .55rem;
  border-radius: 999px;
  background: var(--bg-tag);
  color: var(--ink-soft);
  font-size: .74rem;
}
.lit-correct-status.status-approved { color: var(--success-ink); background: var(--success-bg); }
.lit-correct-status.status-applied { color: var(--ink-on-accent); background: var(--accent); }
.lit-correct-status.status-rejected { color: var(--error-ink); background: var(--error-bg); }
.lit-correct-field, .lit-correct-date { color: var(--ink-soft); font-size: .76rem; }
.lit-correct-diff { flex: 1 1 18rem; min-width: 0; }
.lit-correct-diff del { color: var(--ink-soft); text-decoration-thickness: 1px; }
.lit-correct-diff ins { margin-left: .4rem; text-decoration: none; border-bottom: 2px solid var(--pf-gold); }
.lit-correct-note { flex: 1 1 100%; color: var(--ink-soft); font-size: .78rem; }
.lit-correct-form-wrap { margin-top: 1rem; }
.lit-correct-form-wrap > summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.lit-correct-rule { margin: .8rem 0; color: var(--ink-soft); font-size: .82rem; }
.lit-correct-form { display: grid; gap: .9rem; margin-top: .8rem; }
.lit-correct-kinds { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.lit-correct-kinds legend { padding: 0; margin-bottom: .35rem; font-weight: 600; }
.lit-correct-kinds label { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; }
.lit-correct-field-label { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; }
.lit-correct-field-label textarea,
.lit-correct-field-label input {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
}
.lit-correct-field-label textarea { font-family: var(--serif); line-height: 1.9; white-space: pre-wrap; }
.lit-correct-hint { margin: 0; color: var(--ink-soft); font-size: .78rem; }
.lit-correct-form .btn { justify-self: start; }

/* ── 統計 ───────────────────────────────────────── */
.stat-cards { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.5rem 0 2.5rem; }
.stat-card {
  flex: 1 1 8rem;
  padding: 1rem .6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-card);
  text-align: center;
  color: inherit;
}
a.stat-card:hover { border-color: var(--accent-soft); text-decoration: none; }
.stat-card b {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat-card span { font-size: .78rem; color: var(--ink-soft); }

.stat-list { list-style: none; margin: .6rem 0 1.6rem; padding: 0; }
.stat-row {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr 4.5rem;
  align-items: center;
  gap: .7rem;
  padding: .28rem 0;
  font-size: .85rem;
}
.stat-label { overflow-wrap: anywhere; }
.stat-bar { height: .6rem; border-radius: 999px; background: var(--bg-muted); overflow: hidden; }
.stat-bar-fill { display: block; height: 100%; background: var(--accent-soft); border-radius: 999px; }
.stat-count { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (max-width: 32rem) {
  .stat-row { grid-template-columns: 1fr 4rem; }
  .stat-bar { grid-column: 1 / -1; order: 3; }
}

.stat-progress {
  height: 1.1rem;
  margin: .6rem 0 1.6rem;
  border-radius: 999px;
  background: var(--bg-muted);
  overflow: hidden;
}
.stat-progress-fill { display: block; height: 100%; background: var(--pf-gold); }
.stat-inline { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: .6rem 0 1.6rem; padding: 0; }
.stat-inline li {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .3rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8rem;
}
.stat-inline b { font-variant-numeric: tabular-nums; }

/* ── 書き出し ────────────────────────────────────── */
.lit-export-form {
  display: grid;
  gap: .9rem;
  max-width: 32rem;
  margin: 1.5rem 0 2.5rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-card);
}
.lit-export-form label { display: grid; gap: .35rem; font-size: .9rem; font-weight: 600; }
.lit-export-form select {
  padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
}
.lit-export-check { display: flex !important; align-items: center; gap: .5rem; font-weight: 400; }
.lit-export-form .btn { justify-self: start; }

/* ── 管理画面（校正の照合）────────────────────────── */
.admin-correction-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
@media (max-width: 45rem) { .admin-correction-diff { grid-template-columns: 1fr; } }
.entry .admin-correction-side h3 { margin: 0 0 .3rem; font-size: .85rem; color: var(--ink-soft); }
.lit-diff-old, .lit-diff-new {
  margin: 0;
  padding: .7rem .8rem;
  border-radius: 8px;
  font-family: var(--serif);
  font-size: .9rem;
  line-height: 1.9;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lit-diff-old { background: var(--error-bg); border: 1px solid var(--error-line); }
.lit-diff-new { background: var(--success-bg); border: 1px solid var(--success-line); }
.admin-correction-match { font-size: .85rem; }
.admin-correction-match.ok { color: var(--success-ink); }
.admin-correction-match.warn, .admin-correction-match.error { color: var(--error-ink); }

/* ── 控えめな1行（空状態の代わり）──────────────────── */
.lit-quiet { color: var(--ink-soft); font-size: .85rem; }