/*
 * components.css — アプリ固有のコンポーネント語彙。
 * 画面ごとに専用クラスを足さず、各画面はこの汎用クラスを組み合わせて使う。
 * 新しい見た目が要るときは、画面固有名ではなく「再利用できる一般ルール」としてここに足す。
 */

/* ── ページ操作の文法 ──────────────────────────
   back-link (上の戻り) / page-header (index: 見出し+主ボタン=既定サイズ) /
   page-meta (h1直下のメタ1行) / actions (show: 建設的操作のみ、btn-sm 統一) /
   delete は actions に置かず最下部の danger-zone(赤・隔離)へ. */
.back-link { display: inline-block; color: var(--muted); text-decoration: none; font-size: 0.85rem; margin-bottom: 0.5rem; }
.back-link:hover { color: var(--accent); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* 一覧/索引ページの h1 直下リード文: そのページの意味＋現状(件数等)を1行で（一等地の活用）。 */
.page-lead { margin: 0.15rem 0 1.3rem; color: var(--muted); font-size: 0.9rem; max-width: 50rem; }
.actions { display: flex; align-items: center; gap: 0.9rem; margin: 0.6rem 0 1.4rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--hairline); }
/* h1 直下のメタ1行：バッジ・作成者・日付・タグ・貢献者をここに集約する（詳細ページ共通の文法） */
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin: 0.25rem 0 0.4rem; font-size: 0.9rem; color: var(--ink-soft); }
.page-meta .avatar { vertical-align: middle; }
.page-meta .when { margin: 0; }
.profile__bio { color: var(--muted); }

/* 破壊的操作の隔離ゾーン（show の最下部） */
.danger-zone { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }
.danger-zone__label { display: block; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.45rem; }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover, .btn-danger:focus { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Compact inline action button (delete / logout) — sits beside text links. */
.btn-sm { padding: 0.18rem 0.6rem; font-size: 0.8rem; line-height: 1.4; }

/* Pico classless は variants を提供しないため、Rails が出力するボタン要素にだけ副次操作の語彙を定義する。 */
a[role="button"].secondary, a.button.secondary, button.secondary, input[type="submit"].secondary {
  background: var(--accent-weak); border-color: var(--hairline); color: var(--ink-soft);
}
a[role="button"].secondary:hover, a.button.secondary:hover, button.secondary:hover, input[type="submit"].secondary:hover,
a[role="button"].secondary:focus-visible, a.button.secondary:focus-visible, button.secondary:focus-visible, input[type="submit"].secondary:focus-visible {
  background: var(--surface); border-color: var(--accent); color: var(--accent);
}
a[role="button"].outline, a.button.outline, button.outline, input[type="submit"].outline {
  background: transparent; border: 1px solid currentColor; color: var(--ink-soft);
}
a[role="button"].outline:hover, a.button.outline:hover, button.outline:hover, input[type="submit"].outline:hover,
a[role="button"].outline:focus-visible, a.button.outline:focus-visible, button.outline:focus-visible, input[type="submit"].outline:focus-visible {
  background: var(--accent-weak); color: var(--accent);
}

/* 管理者専用操作を上部で強調するブロック */
.admin-box { border: 1px solid var(--accent); border-left-width: 3px; background: var(--accent-weak); border-radius: 8px; padding: 0.7rem 0.9rem; margin: 0 0 1.3rem; }
.admin-box__label { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.35rem; }
.admin-box p { margin: 0; }

/* ── 汎用レイアウト語彙 ─────────────────────── */

/* Muted text utility (Pico classless has no .muted class of its own) */
.muted { color: var(--muted); }

/* 段落から <div> へ移したブロック群の縦リズム復元（Pico は <p> にだけ既定 margin を付ける）。
   いずれも単一リンク/操作行・補助行で、本文段落より控えめな間隔にそろえる。 */
.nav-link { margin: 0.5rem 0; }                                  /* 「← 資料へ戻る」等の戻り導線 */
.profile-link { margin: 0.6rem 0; }
.material-file-info { margin: 0.5rem 0 0; }                      /* プレビュー下のファイル名＋DL行 */
.transcription-actions { margin-top: 0.6rem; }                  /* 「パートを追加」操作行 */
.activity-more-link, .incomplete-more-link, .stats-more-link { margin-top: 0.7rem; } /* カード下の「すべて見る」 */
.filters { margin: 0.7rem 0; }                                  /* 記事一覧の絞り込みバー */
.filter-notice { margin: 0.5rem 0; }                            /* 「#タグ で絞り込み中」通知行 */
.search-note { margin: 0.5rem 0; }
.pdf-viewer__status { margin: 0.3rem 0 0; }
/* 引用タグ行: <p> 内に置けなかった button_to(<form>) を含むため div 化。要素を横並びに保つ。 */
.cite-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0.2rem; }

/* SVG アイコン（Lucide スプライト）: 文字サイズ追従・currentColor で着色 */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }

/* タイムライン: 黒点マーカーの代わりにアクション種別アイコンを行頭に出す
   （Pico は li 側にもマーカーを当てるので両方で無効化する） */
.timeline { list-style: none; padding-left: 0; margin: 0; }
/* 左=アバター / 右=本文。マーカー分のインデントは付けない（padding-left:0）。 */
.timeline li { display: flex; align-items: flex-start; gap: 0.45rem; list-style: none; margin-bottom: 0.5rem; }
.timeline li::marker { content: none; }
.timeline li .avatar { flex: 0 0 auto; margin-top: 2px; } /* 視覚補正で少し下げる */
.timeline__body { flex: 1; min-width: 0; } /* テキストはアバターの右から始まり、折り返しても潜り込まない */
.timeline__icon { color: var(--muted); margin-right: 0.35rem; }
.timeline .notification--unread { padding: 0.35rem; margin-left: -0.35rem; margin-right: -0.35rem; border-radius: 6px; background: var(--accent-weak); }
/* 「ほかN件」はアバター幅(32px)＋gap ぶん右に寄せて本文と揃える */
.timeline__overflow { font-size: 0.85rem; padding-left: calc(32px + 0.45rem); }

/* 改行を保持して表示（文字起こし本文など） */
.prewrap { white-space: pre-wrap; }

/* 行リスト: メイン(.row__main)を左に伸ばし、末尾に meta・アクションを並べる。ヘアライン区切り。 */
.rows { list-style: none; padding: 0; margin: 0; }
.row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--hairline); }
.row__main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 補足メタ（アバター＋名前＋日時など）: ミュート小・横並び */
.meta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.meta img { border-radius: 50%; vertical-align: middle; }

/* あいまい日付の表示（FuzzyDateComponent。page-meta 内では margin を打ち消す＝上の .page-meta .when） */
.when { color: var(--muted); font-size: 0.9rem; margin: 0.25rem 0 1rem; }

/* タグ候補（既存タグ辞書とのマッチ。クリックで付与） */
.tag-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; margin: 0.8rem 0; }
.tag-suggestions__hint { font-size: 0.75rem; }
/* 候補チップ: 確定ボタンと区別する「未確定」の点線ピル。hover で採用イメージの塗りに */
button.tag-chip {
  font-size: 0.78rem; line-height: 1.5; padding: 0.05rem 0.6rem; margin: 0;
  border: 1px dashed var(--accent); border-radius: 999px;
  background: transparent; color: var(--accent); width: auto;
}
button.tag-chip:hover, button.tag-chip:focus {
  background: var(--accent-weak); border-style: solid; color: var(--accent-dark);
}

/* 件数・ラベルの小チップ */
.pill { font-size: 0.75rem; color: var(--ink-soft); background: var(--accent-weak); border-radius: 999px; padding: 0.05rem 0.55rem; }

/* タブ（文字起こし進捗など）。JS無効時は全パネルが見えるだけで機能は損なわない */
.tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--hairline); margin: 0 0 0.8rem; flex-wrap: wrap; }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 0.4rem 0.7rem; cursor: pointer; font: inherit; color: var(--ink-soft);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ホームのヒーロー（一等地: ミッション一言 + 主要導線 + サマリ）。ブランド名はトップバーに
   出ているので見出しでは繰り返さない（h1 は sr-only）。縦間隔は gap に集約し、
   タグライン有無で破綻しないようにする。上の余白は main の padding に任せる。 */
.home-hero { text-align: left; margin: 0 0 1.8rem; display: flex; flex-direction: column; gap: 1.4rem; }
.home-hero__heading { font-size: 2.2rem; line-height: 1.15; margin: 0; }
/* 見出し直下にタグラインが続くときは間隔を詰める（gap の 1.4rem だと離れすぎる）。 */
.home-hero__heading + .home-hero__tagline { margin-top: -1rem; }
.home-hero__tagline { max-width: 42rem; margin: 0; color: var(--muted); font-size: 1.05rem; }
.home-hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; margin: 0; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.15rem;
  border: 1px solid var(--accent); border-radius: 8px; font-weight: 600;
  background: transparent; color: var(--accent); text-decoration: none;
}
.btn-hero:hover { background: var(--accent-weak); }
.btn-hero:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-hero__sum { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.home-hero__sum strong { font-size: 1.15rem; color: var(--ink); }
.home-hero__sum a { display: inline-flex; align-items: center; }
/* 詳細ページのゾーン見出し: h1(タイトル)と競合しない控えめなサイズに統一。
   ゾーン内の小見出し(h3)はさらに一段小さく、ラベル寄りの色にする。 */
.bibliography-section h2, .usage h2, .transcription-section h2, .comments h2, .tags-section h2 {
  font-size: 1.05rem; margin: 0 0 0.6rem; padding-top: 1.1rem; border-top: 1px solid var(--hairline);
}
.usage h3 { font-size: 0.92rem; color: var(--ink-soft); margin: 1.2rem 0 0.4rem; }

/* 文字起こしブロック: カード(surface)＋左の accent ストライプで本文から視認しやすく */
.transcript-box {
  background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--accent);
  border-radius: 6px; padding: 0.9rem 1.1rem; margin: 0.5rem 0 0.8rem;
}
.transcript-box .prewrap { line-height: 1.75; }
.transcript-box .meta { margin: 0 0 0.6rem; font-size: 0.8rem; }
.transcript-box__more { margin: 0.7rem 0 0; }

/* 初回ハードル低下: 最初から書ける常設欄（白紙の壁対策）。 */
.transcribe-starter {
  background: var(--surface); border: 1px dashed var(--accent); border-radius: 8px;
  padding: 0.9rem 1.1rem; margin: 0.5rem 0 0.8rem;
}
.transcribe-starter__form { margin-top: 0.4rem; }
.transcribe-starter__form textarea { margin-bottom: 0.5rem; }
.transcribe-starter__actions { display: flex; align-items: center; gap: 0.9rem; }
.transcribe-starter__actions input[type="submit"] { margin: 0; width: auto; }
.transcript-part { margin: 0 0 1rem; }
.transcript-part__head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.3rem; }
.transcription-summary { font-size: 0.85rem; margin: 0 0 0.8rem; }

/* 担当(assignee)ピッカー: 既存 .topbar__user-menu 同様の details ドロップダウン。弱いサイン。 */
.assignee-menu { position: relative; display: inline-block; }
.assignee-menu__summary { list-style: none; cursor: pointer; font-size: 0.8rem; color: var(--ink-soft); padding: 0.1rem 0.4rem; border-radius: 7px; }
.assignee-menu__summary::-webkit-details-marker { display: none; }
.assignee-menu__summary:hover { background: var(--accent-weak); color: var(--accent); }
.assignee-menu__list {
  position: absolute; left: 0; top: calc(100% + 0.25rem); z-index: 30; min-width: 12rem;
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.3rem;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(20, 17, 15, 0.12);
}
.assignee-menu__list form { margin: 0; }
.assignee-menu__item {
  display: flex; align-items: center; gap: 0.4rem; width: 100%; text-align: left;
  padding: 0.35rem 0.5rem; margin: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--ink); font: inherit; font-size: 0.85rem;
}
.assignee-menu__item:hover { background: var(--accent-weak); color: var(--accent); }
.assignee-menu__item.is-current { font-weight: 600; }
.assignee-menu__item--clear { color: var(--muted); }

/* 「未実装/予定」を示す破線プレースホルダー */
.placeholder { margin: 1rem 0; padding: 2rem 1rem; text-align: center; border: 1px dashed var(--hairline); border-radius: 6px; font-size: 0.85rem; color: var(--muted); }

/* アイコンのみリンク（icon_link ヘルパ）。十分なヒット領域・ホバー・キーボードフォーカスを確保する。
   色は付随クラス(.muted/.meta/.user-link)が指定すればそちらを優先（color は据えない）。 */
.icon-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem; border-radius: 6px; line-height: 0; }
.icon-link:hover { background: var(--surface); }
.icon-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 空状態: 一覧が0件のときのやさしい案内（コンテンツが増えれば消える）。.placeholder とは別物。 */
.empty-state { padding: 1.5rem 0.2rem; color: var(--muted); line-height: 1.9; }
.empty-state__cta { margin-top: 0.6rem; }

/* WIP marker (e.g. 年表 (検討中)) */
.wip { color: var(--muted); font-size: 0.7rem; font-weight: normal; }

/* ── フォーム ──────────────────────────────── */

/* Stacked form: each field group owns its spacing; label sits tight to its control. */
.stacked-form .field { margin-bottom: 1.6rem; }
.stacked-form .field:last-child { margin-bottom: 0; }
.stacked-form .field > label { margin-bottom: 0.4rem; }
/* ラベル直後の必須/任意バッジを改行させず同じ行に出す（label は Pico だと block） */
.stacked-form .field > label:has(+ .field-badge) { display: inline-block; margin-right: 0.15rem; }
.stacked-form .field > :where(input, textarea, select) { margin-bottom: 0; }
.field__hint { display: block; margin: -0.1rem 0 0.55rem; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.field__hint code { font-size: 0.85em; }
/* 既存の添付（書影など）を編集フォームで見せる小プレビュー。「入っている」ことを可視化して差し替え事故を防ぐ。 */
.field__preview { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.55rem; font-size: 0.8rem; }
/* 副次メタデータの折りたたみ（資料フォーム下段「詳しい情報」）。
   「押せる／押すと広がる」が一目で分かるよう、枠＋地色＋回転シェブロン＋ヒントで明示。 */
.stacked-form .secondary-meta { margin: 0 0 1.6rem; border: 1px solid var(--border); border-radius: 8px; }
.secondary-meta > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 0.75rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft);
  background: var(--code-bg); border-radius: 7px; user-select: none;
}
.secondary-meta > summary::-webkit-details-marker { display: none; }
.secondary-meta > summary:hover { color: var(--accent); }
.secondary-meta[open] > summary { border-bottom: 1px solid var(--border); border-radius: 7px 7px 0 0; }
.secondary-meta__chevron { width: 1.05em; height: 1.05em; flex: 0 0 auto; transition: transform 0.15s ease; }
.secondary-meta[open] .secondary-meta__chevron { transform: rotate(90deg); }
.secondary-meta__hint { margin-left: auto; font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.secondary-meta[open] .secondary-meta__hint { display: none; }
.secondary-meta > .field { padding-inline: 0.75rem; }
.secondary-meta[open] > .field:first-of-type { margin-top: 1rem; }
.secondary-meta > .field:last-child { margin-bottom: 1rem; }
/* 「初出」の時刻は既定で隠し、＋ボタンで開く。 */
.btn-inline-add { background: none; border: 1px dashed var(--muted); border-radius: 6px; color: var(--ink-soft); font-size: 0.8rem; padding: 0.15rem 0.45rem; cursor: pointer; line-height: 1.4; }
.btn-inline-add:hover { color: var(--accent); border-color: var(--accent); }
.date-row__time { display: inline-flex; align-items: center; gap: 0.1rem; }
.field__check { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0; font-weight: 400; }

/* Required / optional markers on form labels and fieldset legends */
.field-badge { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.68rem; font-weight: 600; line-height: 1.5; vertical-align: middle; letter-spacing: 0.02em; }
.field-badge--req { color: var(--danger); background: var(--danger-weak); }
.field-badge--opt { color: var(--muted); background: var(--code-bg); }

/* Flash messages（トースト化: layout で右下に積み上げ） */
.flash { padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.9rem; }
.flash--notice { background: var(--accent-weak); color: var(--accent-dark); }
.flash--alert { background: var(--danger-weak); color: var(--danger); }

/* 右下スタック。各 flash はカード状トースト。notice は自動・alert は手動(toast_controller)。 */
.toast-stack {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 60;
  display: flex; flex-direction: column; gap: 0.6rem;
  width: min(92vw, 22rem);
}
/* 登場: 下からせり上がりながらフェードイン。退場(.toast--leaving)は下へ沈んでフェードアウト。 */
@keyframes toast-rise {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast-stack .flash {
  display: flex; align-items: flex-start; gap: 0.6rem;
  box-shadow: 0 8px 24px rgba(20, 17, 15, 0.18); border: 1px solid var(--hairline);
  opacity: 1; transform: translateY(0);
  animation: toast-rise 0.32s ease-out;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast-stack .flash.toast--leaving { opacity: 0; transform: translateY(1rem); }
.flash__msg { flex: 1; }
.flash__close {
  background: none; border: 0; font-size: 1.15rem; line-height: 1; padding: 0 0.1rem; margin: 0;
  cursor: pointer; color: inherit; opacity: 0.55;
}
.flash__close:hover, .flash__close:focus { opacity: 1; }

/* Chronicle date inputs */
.date-clear {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.25rem;
}
.date-clear:hover { color: #c00; }
.date-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.date-row input { font: inherit; width: auto; display: inline-block; margin-bottom: 0; }
.date-row input[name$="_year]"] { width: 6em; }
.date-row input[name$="_month]"],
.date-row input[name$="_day]"],
.date-row input[name$="_hour]"],
.date-row input[name$="_minute]"] { width: 4.5em; }

/* Compact, inline per-page selector */
.per-form { margin: 0 0 1rem; }
.per-select { display: inline-block; margin: 0 0 0 0.4rem; }

/* ── 記事・本文まわり ──────────────────────── */

/* Revision diff */
.diff ins { background: #d4f8d4; text-decoration: none; }
.diff del { background: #f8d4d4; text-decoration: none; }

/* Wiki links */
.wikilink-new { color: #c00; }

/* Inline citations */
.ref { font-size: 0.75em; vertical-align: super; }
.ref a { text-decoration: none; }
.ref-broken { color: #c00; }

/* 出典 card */
.citations {
  margin: 2.5rem 0 0; padding: 1.3rem 1.5rem;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
}
.citations h2 { font-size: 1.05rem; margin: 0 0 0.7rem; }
.citations ol { padding-left: 1.4rem; margin: 0; }
.citations li { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.5rem; line-height: 1.7; }

/* Citation picker (editor toolbar popup) */
.citation-btn { margin: 0 6px; background: transparent; border: 0; color: var(--ink); }
.citation-picker { padding: 8px; }
.citation-picker__search { width: 100%; margin-bottom: 6px; }
.citation-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.citation-list__empty { color: var(--muted); padding: 4px; }
/* Picker options are plain text rows, not Pico's blue primary buttons. */
.citation-list button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--ink);
  padding: 0.35rem 0.5rem; border-radius: 6px; font-size: 0.9rem; line-height: 1.4;
}
.citation-list button:hover { background: var(--accent-weak); color: var(--accent); }
.citation-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* バッジ（記事の状態/種別、資料の信頼度/権利など） */
.badge {
  display: inline-block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em;
  padding: 0.18rem 0.7rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--hairline); color: var(--ink-soft); background: var(--surface);
}
.badge-status { background: var(--accent); color: #fff; border-color: var(--accent); }
.badge-kind { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }

/* ── 資料まわり ────────────────────────────── */

.bibliography { margin: 0.5rem 0; }
.bibliography dt { font-size: 0.8rem; color: var(--muted); }
.bibliography dd { margin: 0 0 0.4rem; }

/* 資料詳細: 本体直下の一級アイデンティティ（分類・初出・出典元）。少し大きめに見せる。 */
.material-identity { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin: 0.8rem 0 0; font-size: 1.02rem; }
.material-identity__item { display: inline-flex; align-items: baseline; }
.material-identity__label { color: var(--muted); font-size: 0.78rem; margin-right: 0.4rem; }
/* 資料詳細: タグゾーン（中段）の付与済みタグ。 */
.material-tags { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin: 0 0 0.4rem; }

/* Material thumbnails */
.material-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; vertical-align: middle; }
.material-thumb--icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; background: var(--code-bg); }

/* タグ詳細ページ。ヒット有無に関わらず常設する本文検索への導線。 */
.tag-search-cta { margin: 0.2rem 0 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
/* タグ詳細ページの資料リスト: サムネ＋タイトル＋メタ(投稿者/初出/文字起こし状態)を1行に。 */
.tag-section { margin-top: 1.6rem; }
.tag-materials { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.tag-materials li { display: flex; align-items: center; gap: 0.7rem; }
.tag-materials__thumb { flex: 0 0 auto; line-height: 0; }
.tag-materials__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tag-materials__title { font-weight: 600; }
.tag-materials__meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.2rem; font-size: 0.82rem; color: var(--muted); }

/* Materials table */
/* 横スクロールするテーブルラッパ（多列テーブルの汎用）。テーブル幅は締めず、はみ出たらここで横スクロール。 */
.table-scroll { overflow-x: auto; }
/* テーブル自体は最小幅を確保して列を詰めすぎない。画面がこれより狭ければ .table-scroll が横スクロールする
   （max-width は付けない＝広い画面で渋滞させない）。 */
.materials-table { min-width: 48rem; }
.materials-table td { vertical-align: top; } /* 行高がタイトルの行数に揃うよう上寄せ */
/* 日付・ステータス列は折返さない（CJKの1字ずつ折返しや日付の途中改行を防ぐ）。
   日付は時刻と同じ数字＋区切り表記（例 2026/06/14 13:38 / 発行日 2020/03）で1行に収まる。 */
.materials-table .col-when, .materials-table .col-status { white-space: nowrap; }
/* タイトルは2行でクランプ（長文を全部出さず行を抑える）。 */
.cell-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* タグは小さめの字でチップを横に詰めて折返す（全部は出さず先頭数件＋「+N」）。 */
.cell-tags { display: flex; flex-wrap: wrap; gap: 0.1rem 0.4rem; font-size: 0.8rem; }
.materials-table th a.sort-link { color: inherit; text-decoration: none; }
.materials-table th a.sort-link:hover { color: var(--accent); }
.pagy { display: flex; gap: 0.4rem; flex-wrap: wrap; padding: 0.75rem 0; list-style: none; }
.pagy a, .pagy span { padding: 0.1rem 0.5rem; }

/* 進行ストリップ: 資料の状態と次の行動を1行のピル列で示す */
.progress-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: -0.6rem 0 1.4rem; }
.strip-step { font-size: 0.8rem; padding: 0.15rem 0.65rem; border-radius: 999px; }
.strip-step--done { background: var(--accent-weak); color: var(--accent-dark); }
.strip-step--todo { background: var(--code-bg); color: var(--ink-soft); }
.strip-step--todo a { color: var(--accent); text-decoration: none; }
.strip-step--todo a:hover { text-decoration: underline; }

/* ── 発売物 ────────────────────────────────── */

/* 発売物の詳細は本体（本文・ファイル）を持たないので、商品情報カードがゾーン①＝主役になる。
   カードは他のカード群（.dashboard-card 等）と同じ surface + hairline + 8px の語彙で揃える。 */
.product-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  /* 書影（左）＋ 商品情報（右）。狭い画面では wrap して書影が上、情報が下に積まれる。 */
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem;
}
.product-card__info { flex: 1 1 16rem; min-width: 0; }
/* 書影は「対象そのもの」なのでカード内で一番大きい要素。縦長・横長どちらの版面でも枠は崩さない。 */
.product-card__cover {
  flex: 0 0 auto; width: 10rem; max-width: 100%; height: auto;
  border: 1px solid var(--hairline); border-radius: 4px; object-fit: contain; background: var(--code-bg);
}
/* 書影なし: 資料サムネ（.material-thumb--icon）と同じ地色でアイコンを置き、穴を空けない。 */
.product-card__cover--icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 10rem; height: 10rem; color: var(--muted);
}
.product-card__cover--icon .icon { width: 2.5rem; height: 2.5rem; }
/* 一覧行: 書影サムネ（資料と同じ .material-thumb）＋商品名を1行に揃える。
   .row__main は既定で inline+ellipsis 前提なので、サムネを置く行だけ flex にする。 */
.publication-row .row__main { display: flex; align-items: center; gap: 0.6rem; }
.publication-row .row__main a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0 0 1rem; }
.product-card dt { color: var(--muted); font-size: 0.9rem; }
.product-card dd { margin: 0; }
.product-card dd .when { margin: 0; }

/* ── 人・コメント ──────────────────────────── */

/* Like ボタン: ラッパー div と button_to の form はブロック要素なので、
   タイムライン等の文中に置いても改行しないようインライン化する。 */
.like-toggle, .like-toggle form { display: inline-flex; vertical-align: middle; }
/* ゴースト表示: Pico のボタン装飾を全て外す。塗り潰しは使わない（フィードで主役化するため）。
   Like 済みは文字色だけで示す。 */
.like-btn, .like-btn:hover, .like-btn:focus {
  background: none; border: none; box-shadow: none;
  padding: 0 0.25rem; margin: 0; width: auto;
  color: var(--muted); font-size: 0.85em; line-height: inherit;
}
.like-btn:hover { color: var(--ink); }
.like-btn--on, .like-btn--on:hover, .like-btn--on:focus { color: #c2404a; }

/* Avatars & profile */
.avatar { border-radius: 50%; object-fit: cover; vertical-align: middle; display: inline-block; }
.avatar-initial { color: #fff; text-align: center; font-weight: 600; }
.profile { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.contributors { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; margin: 0; vertical-align: middle; }
.contributors a { line-height: 0; }

/* Comments (articles / materials) */
.comments { margin-top: 2rem; }
.comment-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.comment { padding: 0.6rem 0; border-top: 1px solid var(--hairline); }
.comment__head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.comment__author { font-weight: 600; }
.comment__body { margin-top: 0.3rem; }
.comment__delete-form { margin: 0 0 0 auto; }
.comment-form textarea { width: 100%; }

.media-preview { margin: 0.1rem 0 0.6rem; }

/* オーバーレイビューア（<dialog>）: 画像の原寸表示・PDF ページビューア共用 */
/* Pico classless は :where(dialog) に min-width/min-height:100% を当てて全画面化する
   （min-width は max-width より優先されるため max-width だけでは効かない）。0 に戻して中身に追従させる。 */
.lightbox {
  border: none; border-radius: 8px; padding: 0; background: var(--panel);
  width: fit-content; height: fit-content; min-width: 0; min-height: 0;
  max-width: min(92vw, 70rem); max-height: 92vh; margin: auto;
}
.lightbox::backdrop { background: rgba(20, 17, 15, 0.55); }
.lightbox img { display: block; max-width: min(92vw, 70rem); max-height: 88vh; object-fit: contain; }
/* PDF ダイアログは中身（ページのアスペクト比）に合わせて縮む。70rem 上限は外す。
   ビューアの地は light/dark どちらでも馴染む中明度グレーの半透明＋ぼかし（ページの白は前面のステージ）。
   ビューアは「元の文書の上に浮く窓」なので、外側(backdrop)は塗らず元の画面をそのまま見せる。 */
.lightbox--pdf { max-width: 96vw; background: rgba(128, 130, 138, 0.45); backdrop-filter: blur(14px) saturate(1.1); }
.lightbox--pdf::backdrop { background: transparent; }

/* PDF ビューア（PDF.js・ページ単位の部分読み込み）。
   ダイアログは中身ぴったりに縮み、ページは本来のアスペクト比でビューポート最大まで表示する。 */
.pdf-viewer { position: relative; padding: 0.7rem 0.8rem; display: flex; flex-direction: column; max-height: 94vh; }
/* ツールバーは「つかんで動かす」ハンドルも兼ねる（ボタン/入力の上ではドラッグしない）。
   操作子を左から順に並べ、狭い画面では折り返す（中央固定はしない＝重なり防止）。
   並び: 綴じ方向 / ページナビ / ズーム / 閉じる（閉じるだけ右端に寄せる）。 */
.pdf-viewer__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; cursor: move; touch-action: none; }
.pdf-viewer__bar.is-dragging { cursor: grabbing; }
/* 関連する操作を角丸の薄いセグメントでまとめて整える。半透明グレーの地に馴染むよう
   不透明色ではなく薄い白のフロストにする。 */
.pdf-viewer__group { display: inline-flex; align-items: center; gap: 0.1rem; padding: 0.15rem; background: rgba(255, 255, 255, 0.22); border-radius: 9px; }
/* アイコンのみの操作ボタン（全ツールバー共通）。十分なヒット領域・ホバー・キーボードフォーカス。 */
.pdf-viewer__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.95rem; height: 1.95rem; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 7px; cursor: pointer; color: var(--ink-soft);
}
.pdf-viewer__btn:hover { background: rgba(255, 255, 255, 0.5); color: var(--accent); }
.pdf-viewer__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pdf-viewer__btn .icon { width: 1.15rem; height: 1.15rem; }
/* 綴じ方向: 右開きのときは本アイコンを左右反転して状態を示す。 */
.pdf-viewer__btn.is-rtl .icon { transform: scaleX(-1); }
/* 前/次ナビ。flex で縮まないよう固定（折り返しても潰れない）。右開きのときは並びを反転して
   「次へ」を左に置く（読み進み方向に一致）。 */
.pdf-viewer__nav { display: inline-flex; align-items: center; gap: 0.1rem; flex: 0 0 auto; }
.pdf-viewer__nav--rtl { flex-direction: row-reverse; }
.pdf-viewer__page { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.3rem; font-size: 0.85rem; color: var(--ink-soft); }
/* 周りの要素と高さを揃えてコンパクトに。Pico の input 既定（縦 padding・margin-bottom・height）が
   クラス1個では勝てない（input:not(...) の方が特異性が高い）ので、.pdf-viewer を前置して上書きする。
   height と一致する line-height で数字を箱の中央に置き、数値スピナー（▲▼）は隠す。 */
.pdf-viewer .pdf-viewer__pageinput {
  width: 2.6rem; height: 1.5rem; line-height: 1.5rem; box-sizing: border-box;
  text-align: center; padding: 0 0.3rem; margin: 0; font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.6);
  appearance: textfield; -webkit-appearance: textfield;
}
.pdf-viewer__pageinput::-webkit-inner-spin-button,
.pdf-viewer__pageinput::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pdf-viewer__pagesep { color: var(--muted); }
.pdf-viewer__zoom { display: inline-flex; align-items: center; gap: 0.1rem; }
/* % 表示はクリックで等倍に戻すボタン。見た目は控えめなテキスト、ホバーで操作可能と示す。 */
.pdf-viewer__pct {
  min-width: 3.4rem; padding: 0.2rem 0.3rem; margin: 0; border: 0; border-radius: 7px;
  background: none; cursor: pointer; font-size: 0.8rem; color: var(--ink-soft); text-align: center;
}
.pdf-viewer__pct:hover { background: rgba(255, 255, 255, 0.5); color: var(--accent); }
.pdf-viewer__pct:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pdf-viewer__close { margin-left: auto; }
/* ステージ: JS が「フィット時のページ寸法」に固定する枠。ツールバーはこの枠の外＝固定。
   ズーム時は枠内で canvas だけが拡大縮小し、はみ出たらこの枠の中だけスクロールする。
   inline-block + text-align:center にして、拡大時も左端までスクロール可能にする（flex の中央寄せ
   だとはみ出した先頭がスクロールできない問題を回避）。 */
/* 背景は透明にして、ページのアスペクト比でできるレターボックスの隙間を
   ビューアの半透明グレー（フロスト地）に馴染ませる。ページ自体の白は canvas 側で出す。 */
.pdf-viewer__stage { overflow: auto; align-self: center; min-width: 14rem; min-height: 10rem; max-width: 92vw; max-height: 82vh; text-align: center; background: transparent; border-radius: 4px; }
/* リサイズグリップ: グレーのダイアログ（ビューア）の右下角に置く。斜めストライプを三角マスクで
   切り出した定番の掴み。ドラッグでステージを変え、ダイアログが追従して大きくなる。 */
.pdf-viewer__resizer {
  position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; z-index: 2;
  cursor: nwse-resize; color: var(--muted); touch-action: none;
  background: repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px 4px);
  -webkit-mask: linear-gradient(135deg, transparent 52%, #000 52%);
          mask: linear-gradient(135deg, transparent 52%, #000 52%);
  border-bottom-right-radius: 4px;
}
.pdf-viewer__resizer:hover { color: var(--accent); }
.pdf-viewer__stage canvas { display: inline-block; vertical-align: top; border: 1px solid var(--hairline); background: #fff; }
/* 拡大でスクロール可能なときだけ掴めるカーソルに（パン中は握り） */
.pdf-viewer__stage.is-pannable { cursor: grab; }
.pdf-viewer__stage.is-panning { cursor: grabbing; }

/* ── ホーム・統計・検索・年表 ──────────────── */

/* Home dashboard */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; }
.dashboard-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.dashboard-card h2 { font-size: 1.05rem; margin: 0 0 0.7rem; }
/* カード内の箇条書き（資料リスト等）は marker 分インデント。timeline は別レイアウトなので除外。 */
.dashboard-card ul:not(.timeline) { margin: 0; padding-left: 1.1rem; }
.dashboard-card li { margin-bottom: 0.35rem; }

/* 統計の推移（スパークライン） */
.stat-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.stat-chart { background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 0.8rem 1rem; }
.stat-chart__head { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.4rem; }
/* 累計推移の縦棒グラフ（0基準・左y軸・下x軸） */
.trend { display: flex; align-items: flex-start; gap: 6px; }
.trend__yaxis { display: flex; flex-direction: column; justify-content: space-between; height: 56px; font-size: 0.7rem; text-align: right; }
.trend__main { flex: 1; min-width: 0; }
.trend__bars { display: flex; align-items: flex-end; gap: 1px; height: 56px; }
.trend__bar { flex: 1; min-height: 1px; background: #6b82b0; border-radius: 1px 1px 0 0; }
.trend__xaxis { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); margin-top: 2px; }

/* 検索結果のスニペット（マッチ前後の引用とハイライト） */
.search-results li { margin-bottom: 0.7rem; }
.search-snippet { font-size: 0.85rem; line-height: 1.6; margin-top: 0.15rem; }
.search-snippet mark { background: #f5e1a4; color: var(--ink); padding: 0 0.15em; border-radius: 3px; }

/* Chronicle (interim flat view) */
.chronicle-list { margin: 0; padding-left: 1.1rem; }
.chronicle-list li { margin-bottom: 0.35rem; }

/* 資料一覧の概況帯 */
.library-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--panel);
  font-size: 0.9rem;
  color: var(--muted);
}
.library-summary__kinds {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
}

/* アクティビティ草マップ（列=週・行=曜日）。横はみ出しはラッパで横スクロール。 */
.heatmap-wrap { overflow-x: auto; }
.heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 2px; width: max-content; }
.heat { width: 11px; height: 11px; border-radius: 2px; background: var(--hairline); }
.heat-1 { background: #dfe6f0; }
.heat-2 { background: #aab9d6; }
.heat-3 { background: #6b82b0; }
.heat-4 { background: var(--accent); }
.heatmap--sm { grid-template-rows: repeat(7, 8px); }
.heatmap--sm .heat { width: 8px; height: 8px; }
/* 縦軸の曜日ラベル（草マップの7行に揃える）。 */
.heatmap-cal { display: inline-flex; align-items: flex-start; gap: 4px; }
.heatmap__days { display: grid; grid-template-rows: repeat(7, 11px); gap: 2px; }
.heatmap__days span { font-size: 8px; line-height: 11px; color: var(--muted); }

/* トップ等の「箱に入れて左右に並べる」アクティビティカード。狭い画面では縦積み。 */
.activity-cards { display: flex; flex-wrap: wrap; gap: 1rem; }
.activity-card { flex: 1 1 18rem; min-width: 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 0.8rem 1rem; }
.activity-card__head { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.5rem; }

/* 草マップの色凡例。 */
.heat-legend { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; }
.heat-legend .heat { width: 11px; height: 11px; }

/* 時間帯グラフ（24本の縦棒＋x軸＋ピーク）。 */
.hourly__bars { display: flex; align-items: flex-end; gap: 1px; height: 48px; }
.hourly__bar { flex: 1; min-height: 1px; background: #6b82b0; border-radius: 1px 1px 0 0; }
.hourly__axis { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.hourly__peak { font-size: 0.75rem; margin-top: 0.1rem; }

/* 種類別 small multiples。 */
.stat-multiples { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.stat-panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 0.8rem 1rem; }
.stat-panel__head { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.35rem; }
.activity-block { margin-bottom: 1.4rem; }

/* タイムラインの「ほかN件」展開ボタン（テキストリンク風のインラインボタン） */
.timeline-more {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline dotted;
}
.timeline-more:hover {
  text-decoration: underline;
}
.activity-block h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }