/* ひもとく の見た目
 *
 * 本の記録なので、主役は書影と書名。UIの部品を目立たせない。
 *
 *   生成り #faf8f3   紙の地
 *   墨    #1a1a17   本文
 *   藍鼠  #2f3d4f   操作とリンク
 *
 * 書名は明朝。本の名前をゴシックで組むと台帳になる。
 * ニュートラルは本当にニュートラルにする（中間色は濁る）。
 * 本文・補助・薄字は地に対して 4.5:1 以上を保つ。
 */
:root {
  /* 広い画面で、左に並べる行き先の幅 */
  --rail: 168px;
  --ground: #faf8f3;
  --surface: #ffffff;
  --surface-2: #f2efe8;
  --line: #e5e0d6;          /* 区切り線。装飾なのでコントラスト要件なし */
  --line-2: #c8c3b7;        /* 罫・チップの枠 */
  --field: #8e8a80;         /* 入力欄の枠。UI部品なので 3:1 が要る */

  --ink: #1a1a17;
  --ink-2: #48453e;
  --muted: #6e6a61;

  --accent: #2f3d4f;        /* 藍鼠 */
  --accent-hover: #1b2531;
  --on-accent: #ffffff;     /* ボタンの文字。#fff を直書きしない */

  --warn: #9b3a42;          /* 臙脂 */
  --warn-soft: #f6eaeb;
  --grouped: #f2efe8;       /* 面でくくる画面（スマホの設定）の地 */

  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 8px;
  --pad: 18px;
}

/* 暗い配色。**端末の設定に合わせる**のが既定で、設定で「明るい」「暗い」を選んだ人には
   `<html data-theme>` が付いて、端末の設定より優先する（2026-10-05）。
   値は2か所に同じものを書く（CSS だけで1つにまとめる手が無い）。**変えるときは両方** */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #171614;
    --surface: #201f1c;
    --surface-2: #272621;
    --line: #34322d;
    --line-2: #4a473f;
    --field: #7d7970;
    --ink: #f0eee8;
    --ink-2: #ccc8bf;
    --muted: #a5a096;
    --accent: #a8bed6;
    --accent-hover: #c6d6e6;
    --on-accent: #171614;
    --warn: #e0959a;
    --warn-soft: #342526;
    --grouped: #171614;       /* 面でくくる画面（スマホの設定）の地 */
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #171614;
  --surface: #201f1c;
  --surface-2: #272621;
  --line: #34322d;
  --line-2: #4a473f;
  --field: #7d7970;
  --ink: #f0eee8;
  --ink-2: #ccc8bf;
  --muted: #a5a096;
  --accent: #a8bed6;
  --accent-hover: #c6d6e6;
  --on-accent: #171614;
  --warn: #e0959a;
  --warn-soft: #342526;
  --grouped: #171614;       /* 面でくくる画面（スマホの設定）の地 */
}

* { box-sizing: border-box; }

/* **画面を移っても中身を横に跳ねさせない**（2026-10-05。大きい画面で「がくがくする」と言われた）。
   スクロールバーが幅を取る環境（マウスをつないだ Mac・Windows）では、短いページでバーが消えて
   中央に寄せた中身が数px動く。いつもバーの場所を空けておく */
html { scrollbar-gutter: stable; }

/* 画面の移り変わりを、ページ全体の読み直しのちらつきではなく、ゆるい切り替えにする。
   **CSS だけ**（対応していないブラウザでは今までどおり）。頭とタブは名前を付けて、
   全体と一緒に薄くならないようにする（どの画面でも同じものなので、そのまま残って見える）*/
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
.tabs { view-transition-name: tabs; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .15s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* body を縦の flex にしているのは **帰属表示を画面の下端に留めるため**。
 *
 * 素の流れだと footer が main の直後に来るので、中身が短いページ
 * （空の本棚・見つからなかった検索・ログイン画面）では画面の真ん中あたりに
 * 浮いて、ページを移るたびに上下する。
 *
 * **順序を作るために flex を使っているのではない。**`order` は使わない
 * （下タブで一度踏んだ。DOM の順序どおりに並んでいることが前提）。
 * ここでやっているのは main を伸ばすことだけ。
 *
 * dvh はモバイルのブラウザUIの伸縮に追従する。読めない環境のために vh を先に置く。
 */
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.75 var(--sans);
  -webkit-text-size-adjust: 100%;
  padding: 0 0 calc(70px + env(safe-area-inset-bottom));

  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* 中身が短くても main が余白を吸い、footer が下端に残る。
 * 縮ませない（0 にすると長いページで潰れる）。
 *
 * **`width: 100%` が要る。**flex の交差軸のマージンが `auto` だと
 * `stretch` が効かず（仕様どおり）、main が中身の幅まで縮む。
 * `margin: 0 auto` で中央に置いているので、幅は自分で指定する。 */
main {
  flex: 1 0 auto;
  width: 100%; max-width: 620px; margin: 0 auto; padding: var(--pad);
}

h1 {
  font: 600 1.25rem/1.4 var(--serif);
  margin: 0 0 20px;
  letter-spacing: .02em;
}
h2 { font: 600 1rem/1.4 var(--serif); margin: 28px 0 10px; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

/* ========== 下タブ。親指で届く位置に置く ==========
 *
 * DOM 上は main の前に置いてある（PC で上ナビにするため）。
 * モバイルでは fixed で画面下に回す。**順序を CSS だけで変えない** ——
 * position: static に戻したとき、DOM の順どおり main の下に落ちる。
 */
.tabs {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--line);
}
/* **折り返さない。**幅は語の長さに合わせて配分する（2026-10-11、「タイムライン」が2行に割れた）。
   320px でも1行に収まる（文字は小さくしない）*/
.tabs a {
  flex: 1 1 auto; white-space: nowrap; text-align: center; padding: 11px 6px;
  color: var(--muted); text-decoration: none;
  font-size: .82rem; border-radius: var(--radius);
}
.tabs a.on { color: var(--ink); background: var(--surface-2); }
/* ========== 記録する。浮くボタン ==========
 *
 * タブから出したのは、タブが「場所」で、これが「動作」だから。
 * 混ぜると隣の「さがす」と境目が曖昧になる（実際にそう言われた）。
 *
 * 下タブの上に重ねる。親指の届く右下に置き、下タブとは離して押し間違いを防ぐ。
 */
.compose {
  position: fixed; z-index: 11;
  right: 16px; bottom: calc(70px + 14px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 7px;
  padding: 13px 19px 13px 16px;
  color: var(--on-accent); background: var(--accent);
  font-weight: 600; font-size: .92rem; text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgb(0 0 0 / .28);
}
.compose:hover { color: var(--on-accent); background: var(--accent-hover); }
.compose-mark { font-size: 1.05rem; line-height: 1; }

/* ========== 画面内の切替（記録の 自分／みんな） ==========
 *
 * タブと同じ見た目にしない。タブは「別の場所へ移る」、これは「同じ画面の絞り込み」。
 * PC ではタブが画面上部の下線つきナビになるので、そこと同じ形にすると
 * ナビが2段あるように見える。こちらは丸いつまみにして役割を分ける。
 * ========================================================================== */
.switch {
  display: inline-flex; gap: 2px;
  margin: -4px 0 24px; padding: 3px;
  background: var(--surface-2); border-radius: 999px;
  /* 3つ並ぶと 320px 幅で溢れる。ここだけ横に流す（ページ本体は動かさない） */
  max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
}
.switch a {
  /* 「自分の記録」「みんなの記録」が 320px 幅でも1行に収まる余白 */
  padding: 7px 15px; border-radius: 999px;
  color: var(--muted); text-decoration: none; font-size: .85rem;
  white-space: nowrap;
}
.switch a:hover { color: var(--ink-2); }
.switch a.on {
  background: var(--surface); color: var(--ink); font-weight: 600;
  /* 明暗を反転させない。ダークでは surface が surface-2 より暗いので、
     浮き上がりは影ではなく枠で示す */
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* ========== お知らせ ==========
 * マスト頭の点。**数は出さない**（数を出すと消すための圧になる）。
 */
/* **baseline ではなく center。**印が入る前は文字どうしだったので baseline で揃った。
 * 今の題名は inline-flex で、**最初の子が SVG**。置換要素にはベースラインが無いので
 * 箱の下端が代わりに使われ、「お知らせ」が 11px 下がっていた（実測）。 */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bell {
  position: relative; font-size: .8rem; color: var(--muted); text-decoration: none;
  padding-right: 10px;
}
.bell:hover { color: var(--ink-2); }
.bell.on::after {
  content: ""; position: absolute; top: 1px; right: 0;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

.notices { list-style: none; margin: 0; padding: 0; max-width: 620px; }
.notices li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.notices .cover { width: 48px; height: 68px; }
.notice-body { min-width: 0; flex: 1; }
.notice-title { font: 500 .96rem/1.5 var(--serif); margin: 0; color: var(--ink); }
.notice-title a { color: inherit; text-decoration: none; }
.notice-title a:hover { color: var(--accent); }
.notice-note { font-size: .84rem; color: var(--ink-2); margin: 4px 0 0; }
.notices time { font-size: .74rem; color: var(--muted); display: block; margin-top: 5px; }

/* **「広告」を目立たなくしない。**編集された情報と区別がつかなくなると違法 */
.ad-mark {
  display: inline-block; margin: 0 0 5px;
  padding: 2px 7px; border-radius: 3px;
  font-size: .7rem; letter-spacing: .06em;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line-2);
}

/* ========== 冊数 ==========
 * **責めない。**数が近いことは失敗ではないので、色で警告しない。
 */
.shelf-count { font: 600 1.5rem var(--serif); margin: 0 0 6px; color: var(--ink); }

/* ========== 本棚の検索 ==========
 * 書名・著者・**自分が書いた言葉**を引く。
 * 「あの本、なんて書いたっけ」から辿れるのが、書誌マスタの検索とは別の価値。
 */
.shelf-search { display: flex; gap: 8px; align-items: center; margin: 0 0 18px; }
.shelf-search input[type="search"] {
  /* 本棚（横に「絞り込む」）と記録で同じ高さにする */
  flex: 1; min-width: 0; min-height: 44px; padding: 10px 15px;
  font-size: .92rem; color: var(--ink);
  border: 1px solid var(--field); border-radius: 999px; background: var(--surface);
  -webkit-appearance: none;
}
.shelf-search .clear { font-size: .82rem; color: var(--muted); white-space: nowrap; }
/* 横に並べるので、全体の `form > * + *` の上の余白を打ち消す。
   隠し項目（`only`・`tag`）の後ろの検索欄が12px下がっていた */
.shelf-search > * + * { margin-top: 0; }

/* 本棚の検索と「絞り込む」（2026-10-04、7e）。
   **開いた中身は検索の行の下に、行いっぱいの幅で出す。**
   summary だけを右上に浮かせ、検索欄はその幅だけ右を空ける。
   閉じているとき details の高さは0なので、開くと中身が本を押し下げる（上に重ねない）*/
.shelf-find { position: relative; margin: 0 0 18px; }
.shelf-find .shelf-search { margin: 0; }

.shelf-find:has(.shelf-filter) .shelf-search { margin-right: calc(7rem + 8px); }
.shelf-filter > summary {
  position: absolute; top: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; width: 7rem; min-height: 44px; padding: 0 14px;
  font-size: .875rem; color: var(--accent); cursor: pointer; list-style: none;
  border: 1px solid var(--line-2); border-radius: var(--radius);
}
.shelf-filter > summary::-webkit-details-marker { display: none; }
.shelf-filter > summary:hover { background: var(--surface-2); }
.shelf-filter[open] > summary { background: var(--surface-2); }
.shelf-filter .badge {
  font: 600 .7rem/1 var(--sans); color: var(--on-accent); background: var(--accent);
  border-radius: 999px; padding: 3px 6px;
}
.filter-panel {
  margin: 10px 0 0; padding: 14px 14px 8px;
  background: var(--surface-2); border-radius: var(--radius);
}
.filter-panel section + section { margin-top: 10px; }
.filter-panel h2 { margin: 0 0 6px; font: 400 .75rem var(--sans); color: var(--muted); }
/* パネルの中では折り返す（横に流すと右が切れていた）*/
.filter-panel .filters { flex-wrap: wrap; overflow: visible; padding-bottom: 6px; margin: 0; gap: 6px; }
.filter-panel .filters a { background: var(--surface); }
.filter-panel .filters a.on { background: var(--accent); }
.more-tags > summary {
  display: inline-block; padding: 2px 0 8px; font-size: .8rem; color: var(--accent);
  cursor: pointer; list-style: none;
}
.more-tags > summary::-webkit-details-marker { display: none; }
.more-tags[open] > summary { display: none; }
/* 選んでいるもの1つと冊数 */
.filter-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -6px 0 16px; }
.filter-chosen .chosen {
  padding: 5px 13px; font-size: .8rem; text-decoration: none;
  color: var(--on-accent); background: var(--accent); border-radius: 999px;
}
.filter-chosen .n { font-size: .8rem; color: var(--muted); }

/* 同じ束の見方を2つから選ぶ切替（記録の すべて／引用、リストの 本の一覧／引用を読む）。
   **寸法は本棚／リストの切替（`.switch`）と揃える。**本棚と記録で、見出しから検索欄までの
   高さが数px違っていて、タブを行き来すると検索欄が跳ねて見えた（2026-10-05）*/
.view-toggle {
  display: flex; width: max-content; max-width: 100%; gap: 2px;
  margin: -4px 0 24px; padding: 3px;
  background: var(--surface-2); border-radius: 999px;
}
.view-toggle > * {
  padding: 7px 15px; border-radius: 999px; font-size: .85rem; text-decoration: none;
  white-space: nowrap;
}
.view-toggle a { color: var(--muted); }
.view-toggle a:hover { color: var(--ink-2); }
/* 浮き上がりは影ではなく枠で示す（`.switch.on` と同じ。ダークでは影が見えない）*/
.view-toggle [aria-current] {
  color: var(--ink); font-weight: 600; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

/* 引用を読む組み（8c）。書影も罫線も無し。引用＝明朝、自分の言葉＝ゴシック */
.quote-month h2 {
  margin: 22px 0 6px; font: 400 .75rem var(--mono); color: var(--muted); letter-spacing: .08em;
}
.quote-month:first-child h2 { margin-top: 4px; }
.quote-month ul { list-style: none; margin: 0; padding: 0; }
.quote-month li + li::before {
  content: "・・・"; display: block; margin: 14px 0; text-align: center;
  font-size: .75rem; color: var(--line-2); letter-spacing: .6em;
}
.quotes blockquote {
  margin: 0; padding: 0; border: 0;
  font: 1.125rem/2 var(--serif); color: var(--ink); text-wrap: pretty; white-space: pre-line;
}
.quote-source { margin: 8px 0 0; font-size: .75rem; color: var(--muted); }
.quote-own {
  margin: 10px 0 0; font: .875rem/1.8 var(--sans); color: var(--ink-2); white-space: pre-line;
}

/* 1つのリストの中。名前の上に戻り道を1行 */
.back-line { margin: 0 0 4px; font-size: .8rem; }
.back-line a { text-decoration: none; }

/* ========== ホームの帯（理由の言える本） ==========
 *
 * 「おすすめ」ではない。順位（売上・評価・共起）を持っていないので名乗れない
 * （`ShelfRows` に実測）。だから**なぜここにあるか**を各カードに添える。
 *
 * 横スクロールにするのは、本棚本体を押し下げないため。
 * 帯3本を縦に積むと、モバイルで自分の本が画面外に出る。
 * ========================================================================== */
.strip { margin: 0 0 24px; }
.strip h2 {
  font: 600 .82rem/1.5 var(--sans); color: var(--muted);
  margin: 0 0 9px; letter-spacing: .05em;
}
.strip .cards {
  display: flex; gap: 13px; list-style: none; margin: 0;
  /* 帯の中だけで横スクロールさせる。ページ本体は横に動かさない */
  padding: 0 0 4px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.strip .cards li { flex: 0 0 auto; width: 88px; scroll-snap-align: start; }
.strip .card { display: block; text-decoration: none; color: inherit; }
.strip .cover { width: 88px; height: 124px; }
.strip .title {
  font: 500 .76rem/1.4 var(--serif); color: var(--ink); margin: 7px 0 0;
  /* 2行で切る。題が長い本が帯の高さを決めてしまう */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.strip .subtitle {
  font-size: .68rem; color: var(--ink-2); margin: 2px 0 0;
  /* 幅88pxなので1行で切る。副題が題より目立ってはいけない */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.strip .why {
  font-size: .68rem; color: var(--muted); margin: 3px 0 0;
  /* 2行で切る。理由が長いとカードの高さが揃わない */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========== 買える場所 ==========
 * **アフィリエイトではない。**だから目立たせない ——
 * 買わせたいのではなく、買いたい人が詰まらないようにするだけ。
 * ボタンにしない（押させる形にすると勧めていることになる）。
 */
/* 買える場所。**別の場所へ行く動作**なので、本文の中のリンクではなく
   押せるものに見せる。ロゴは使わない（1店舗だけで、提携もしていない） */
.buy { margin: 16px 0 0; }
.buy-button {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px;
  font-size: .82rem; color: var(--ink-2); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 999px;
}
.buy-button:hover { color: var(--ink); background: var(--surface-2); }
/* 別のタブで開く印。文字より控えめに置く（主役は店の名前） */
.buy-button .ext { flex: none; opacity: .7; }

/* 規約。**読ませるための文章**なので、行間を広く、幅を狭く取る */
.legal { max-width: 40em; }
.legal h2 { margin: 30px 0 8px; }
.legal p, .legal li { line-height: 1.9; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 4px; }
.legal-date { color: var(--muted); font-size: .8rem; margin: -12px 0 0; }
.legal-table { width: 100%; border-collapse: collapse; margin: 10px 0 0; }
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top; padding: 10px 12px 10px 0;
  border-top: 1px solid var(--line); font-weight: 400; line-height: 1.8;
}
.legal-table th { width: 12em; color: var(--ink-2); }
/* フッターの並び。**買う前に読むもの**なのでログインの前から出す */
.legal-links { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 6px; }
/* 楽天の表記は途中で切らない（折り返すならこの前で）*/
.credit-rakuten { white-space: nowrap; }

/* ========== 読み手のページ / フォロー ==========
 * **フォロワーの数も一覧も出さない**（数で圧をかけない。Reads と同じ思想）。
 */
.reader-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.reader-head h1 { margin-bottom: 14px; }
.readers { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 22px; }
/* 1冊ぶんの、人の記録。**本の詳細（書誌）にだけ出す。**
   自分の記録の時系列は別の画面（`/books/:id`）にあり、ここには出さない */
.book-shared { margin: 34px 0 0; }
.book-shared h2 {
  margin: 0 0 4px; color: var(--muted);
  font: 600 .78rem/1.6 var(--sans); letter-spacing: .06em;
}
/* 書影も書名も上に出ている。**全部同じ本**なので繰り返さない */
.record.bare { display: block; }

/* **誰が・いつ。**一般的なタイムラインの骨格で、どちらも欠けていた ——
   表示名は小さく、時刻は1件も出ていなかった（日付の見出しで束ねていた）。
   束ねるのをやめて1件ごとに出す */
.record .head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 0 0 2px;
}
.record .who {
  font: 600 .86rem var(--sans); color: var(--ink); text-decoration: none;
}
.record .who:hover { color: var(--accent); }
.record .at { color: var(--muted); font-size: .74rem; }
.who a { color: var(--ink-2); text-decoration: none; }
.who a:hover { color: var(--accent); }

/* ========== 続けてかざす ==========
 * 棚を移す動作。「記録する」より控えめに置く（そちらが主）。
 */
.scan .quiet {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line-2); font-weight: 400;
}
.scan .quiet:hover { color: var(--ink-2); background: var(--surface-2); }
.sweep-count { font: 600 1.6rem var(--serif); margin: 14px 0 4px; }
.sweep-count span { font-size: 2.2rem; }
.sweep-log { list-style: none; margin: 0 0 14px; padding: 0; max-height: 46vh; overflow-y: auto; }
.sweep-log li {
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: .86rem; color: var(--ink);
}
.sweep-log li a { color: inherit; text-decoration: none; }
.sweep-log .dupe, .sweep-log .miss { color: var(--muted); }
#sweep-stop { margin-top: 4px; }

/* ========== 同じ本が2件ある / もう持っている ==========
 * **責めない。**2冊持つことはあるし、買い直すこともある。
 * 警告の色（臙脂）は使わない —— 間違いではないので。
 */
.already, .dupes {
  margin: 14px 0 0; padding: 11px 14px;
  background: var(--surface-2); border-radius: var(--radius);
  font-size: .86rem; color: var(--ink-2);
}
.already a, .dupe a { color: var(--accent); }

/* ログインの前。調べるところまでは誰でもできる（`TitlesController`）。
   謳い文句は置かず、何のサービスかだけ小さく言う */
.guest-note { margin: 8px 0 0; font-size: .86rem; color: var(--muted); }
/* ログイン前の「最近出た本」（11g）。見出しは帯（`.strip h2`）と同じ見た目 */
.guest-releases { margin: 26px 0 0; }
.guest-releases h2 {
  font: 600 .82rem/1.5 var(--sans); color: var(--muted); margin: 0 0 4px; letter-spacing: .05em;
}
.guest-releases ul { list-style: none; margin: 0; padding: 0; }
.guest-releases li { border-top: 1px solid var(--line); }
.guest-releases .release {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 10px 0; color: inherit; text-decoration: none;
}
.guest-releases .cover { width: 44px; height: 62px; }
.release-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.release-head .title { font: 600 .92rem/1.5 var(--serif); color: var(--ink); min-width: 0; }
.release-head time { flex: none; font: .72rem var(--mono); color: var(--muted); }
.release-by { display: block; margin-top: 2px; font-size: .75rem; color: var(--muted); }
.guest-releases .release:hover .title { text-decoration: underline; }
.guest-everyone {
  margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9rem;
}
.guest-record { margin: 20px 0; padding: 14px 16px; background: var(--surface-2); border-radius: var(--radius); }
.guest-record p { margin: 0 0 10px; }
.guest-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.dupes p { margin: 0; }
.dupes .dupe { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* ========== タグ ==========
 * 自分が付けた語。整理したくなった人だけが使うので、目立たせない。
 */
.tags { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 20px 0 0; }
.tag {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--surface-2); border-radius: 999px; padding: 0 3px 0 12px;
  font-size: .82rem;
}
.tag a { color: var(--ink-2); text-decoration: none; }
.tag a:hover { color: var(--accent); }
.tag form { display: inline; }
.tag .x {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: .9rem; line-height: 1; padding: 5px 6px;
}
.tag .x:hover { color: var(--warn); }
.add-tag { display: flex; gap: 6px; }
.add-tag input[type="text"] {
  width: 8.5em; padding: 6px 11px; font-size: .82rem;
  border: 1px solid var(--field); border-radius: 999px; background: var(--surface);
  color: var(--ink);
}
.add-tag input[type="submit"] {
  border: 0; background: var(--surface-2); color: var(--ink-2);
  border-radius: 999px; padding: 6px 13px; font-size: .82rem; cursor: pointer;
}
.add-tag input[type="submit"]:hover { background: var(--line); }

/* ========== 引用 ==========
 *
 * **本の言葉を、自分の言葉と同じ見た目で出さない。**
 * 同じに見えると、誰が書いたのか分からなくなる。
 * 罫線と明朝で「引かれてきた言葉」にする（題を明朝で組むのと同じ理由）。
 */
.quote {
  margin: 6px 0 0; padding: 2px 0 2px 13px;
  border-left: 2px solid var(--line-2);
  font: 400 .95rem/1.85 var(--serif); color: var(--ink);
}
/* 本棚の1行は blockquote を置く余地が無いので、書体だけで分ける */
.note.as-quote {
  font-family: var(--serif);
  padding-left: 9px; border-left: 2px solid var(--line-2);
}

/* 本に起きたこと。**押さなくてよい**（ほとんどの記録には何も起きていない）。
   下のタグとは押した結果が違うので、**見た目を変える**（塗り／線）。
   列の頭に何の列かを置く —— 見出しが無いと、押すと何が起きるか分からない */
.as-event { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; align-items: center; }
.lede { color: var(--muted); font-size: .78rem; margin-right: 3px; flex: none; }
.as-event input { position: absolute; opacity: 0; pointer-events: none; }
.as-event label {
  /* 全体の `label { display: block; margin-top: 18px }` を中で打ち消す。
     列に並べるので block でも 18px でもない */
  display: inline-block; margin: 0;
  padding: 6px 15px; border-radius: 999px; cursor: pointer;
  font-size: .82rem; color: var(--muted); background: var(--surface-2);
}
.as-event input:checked + label {
  color: var(--ink); font-weight: 600; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.as-event input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* その出来事に乗せる自分の語。**任意・複数。ひとつも押さなくてよい。**
   既定の語は置かない（最初に自分で打った語が次から並ぶ）。
   出来事と違って「必ず1つ選ばれている」ものではないので、塗らずに線で出す */
.as-chip { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; align-items: center; }
.as-chip input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.as-chip label {
  /* **label と input を同じ列に混ぜている。**打ち消さないと、
     label の 18px と input の 6px の差で 6px ずれて見える（実測） */
  display: inline-block; margin: 0;
  padding: 5px 13px; border-radius: 999px; cursor: pointer;
  font-size: .78rem; color: var(--muted);
  border: 1px solid var(--line-2); background: transparent;
}
.as-chip input:checked + label {
  color: var(--on-accent); background: var(--accent); border-color: transparent;
}
.as-chip input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
/* **プレースホルダが収まる幅にする。**7.5em だと6文字が枠に入りきらず、
   途中で切れて読めなかった（実測） */
/* チップと高さをそろえる。border の太さが同じでも、input は既定の
   line-height が違うので、揃えないと1〜2px ずれて見える */
/* プレースホルダが `＋` だけなので、9.5em は空きすぎる */
.as-chip .new-chip {
  margin: 0;
  width: 4.5em; padding: 5px 13px; font-size: .78rem;
  border: 1px dashed var(--field); border-radius: 999px;
  background: transparent; color: var(--ink);
}
.as-chip .new-chip:focus { border-style: solid; border-color: var(--accent); outline: none; }

/* 引用の欄。**閉じておく。**既定は非公開で、非公開の記録に一節を
   書き写すのは私的使用（著作権法30条）なので、ほとんどの人には要らない欄。
   `<details>` なので JS は要らない */
.as-quote-field { margin: 8px 0 0; }
.as-quote-field summary {
  color: var(--muted); font-size: .8rem; cursor: pointer; list-style: revert;
}
.as-quote-field summary:hover { color: var(--ink-2); }
/* **出来上がりと同じ見た目にする。**枠を付けると本文欄と見分けがつかず、
   何を書く欄なのか分からなかった（実測）。罫線と明朝だけにして、
   保存後の `blockquote.quote` と同じ姿にする */
.as-quote-field textarea {
  margin-top: 8px; padding: 2px 0 2px 13px;
  border: 0; border-left: 2px solid var(--line-2); border-radius: 0;
  background: transparent;
  font: 400 .95rem/1.85 var(--serif); color: var(--ink);
}
.as-quote-field textarea:focus { border-left-color: var(--accent); outline: none; }
/* どこから引いたか。**何を入れる欄か、列の頭で言う。**
   `137／第3章／42%` だけだと形式の羅列に見えて伝わらなかった。
   引用と同じ字下げに揃える（罫線のぶん 15px） */
.as-where { display: flex; align-items: center; gap: 8px; margin: 10px 0 0 15px; }
.as-where input[type="text"] {
  flex: 1; min-width: 0; margin: 0;
  padding: 5px 11px; font-size: .78rem;
}

/* 出所（著作権法48条）。**引用の下にだけ出す。**
   小さく置く —— 本文ではないので、引用そのものより目立たせない */
.cited {
  margin: 4px 0 0; padding-left: 15px;
  color: var(--muted); font-size: .74rem;
}

/* みんなの記録に出すか。**既定は外れている**（変えない前提7）。
   全体の `label { display: block; margin-top: 18px }` が効いて、
   生のチェックボックスが1行占領していた（実測）。中で打ち消す */
.as-public { margin: 14px 0 0; }
.as-public input { position: absolute; opacity: 0; pointer-events: none; }
.as-public label {
  display: inline-block; margin: 0; padding: 4px 12px 4px 26px;
  position: relative; cursor: pointer;
  font-size: .8rem; color: var(--muted);
}
.as-public label::before {
  content: ""; position: absolute; left: 6px; top: 50%; margin-top: -7px;
  width: 14px; height: 14px; border: 1px solid var(--line-2); border-radius: 4px;
}
.as-public input:checked + label { color: var(--ink); }
.as-public input:checked + label::before {
  background: var(--accent); border-color: transparent;
}
.as-public input:focus-visible + label::before {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* 写真の欄。**出来事に乗るもの**（言葉・引用・タグと同じ側）。
   何の欄かを列の頭で言う（`どこから` と同じ形）*/
.as-photo { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.as-photo input[type="file"] { font-size: .78rem; color: var(--ink-2); }

/* 撮ったもの。**自分の画面にだけ出る。**横幅いっぱいにはしない ——
   言葉より大きくすると、記録の主役が入れ替わって見える */
.shots { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
.shot { margin: 0; }
.shot form { margin: 2px 0 0; }
.shot img {
  max-width: min(100%, 150px); height: auto; display: block;
  border-radius: 6px; border: 1px solid var(--line);
}

/* 記録に付いた語。**押すと同じ語の記録だけ並ぶ。**
   名前を付ける意味は、あとで見つけられることだけなので、
   見た目より「押せる」ことを優先する */
.entry-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
/* タグ。**角の四角い札**（記録のフォームのタグと同じ形。出来事の丸い札と見分ける）*/
.etag {
  padding: 2px 10px; font-size: .74rem; text-decoration: none;
  color: var(--ink-2); background: var(--surface-2); border-radius: 6px;
}
.etag:hover { color: var(--accent); background: var(--line); }
/* 記録の時系列では、語は `link_to` の外（a の入れ子にできない）にある。
   grid の外に出るぶん、本文の左端に合わせて寄せておく
   （`.record` の 40px＋gap 14px） */
.records .entry-tags { margin: -8px 0 16px 54px; }

/* 何で絞っているか。**やめ方を必ず添える** —— 戻れないと押せない */
.filtered {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline;
  margin: -8px 0 18px; color: var(--ink-2); font-size: .86rem;
}

/* ========== 副題 ==========
 * openBD の題には ` : ` で副題が繋がっている（32.8%）。
 * 題と同じ行に置くと、本の名前がどこまでか分からなくなる。
 * 並行書名（` = ` の他言語表記・4.6%）は Book#display_title が落としている。
 */
.subtitle {
  font: 400 .84rem/1.5 var(--sans); color: var(--ink-2);
  margin: 2px 0 0;
}
h1 + .subtitle { font-size: .92rem; margin: -14px 0 18px; }
.books .subtitle, .lists .subtitle { font-size: .78rem; }


/* ========== 本棚 ========== */
.books { list-style: none; margin: 0; padding: 0; }
.books li + li { border-top: 1px solid var(--line); }
.books a {
  display: grid; grid-template-columns: 62px 1fr; gap: 16px;
  padding: 16px 0; text-decoration: none; color: inherit;
  align-items: start;
}
.books a:hover .title { text-decoration: underline; }

/* 書影。紙の厚みが出るように、影と内側の罫を薄く入れる */
.cover {
  width: 62px; height: 88px; flex: none;
  object-fit: cover; border-radius: 3px;
  background: var(--surface-2);
  box-shadow: 0 1px 3px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.05);
}
/* 書影の無い本。**題で成立させる。**
   頭文字1字だけ出していたころは、同じ著者の本が同じ字で並んで
   見分けがつかなかった。背表紙に見せる —— 左に折れ目の罫、題を縦組み。

   入れ物の大きさが 40px〜116px と幅があるので、**位置は割合**で置き、
   字の大きさだけ `--spine` で入れ物ごとに決める。
   影と角丸は書影と同じ（`.cover`）—— 枠線は外す（本の背に枠は無い）*/
.cover.blank {
  --spine: .76rem;
  display: block; position: relative; overflow: hidden;
  border: 0;
}
.cover.blank::before {
  content: ""; position: absolute; left: 13%; top: 0; bottom: 0;
  width: 1px; background: var(--line-2);
}
.cover.blank .spine {
  /* **1列にする。**折り返すと本の背に見えない。
     長い題は切れてよい（題は隣にも出ている）*/
  position: absolute; left: 26%; top: 8%; bottom: 8%; width: 1.25em;
  writing-mode: vertical-rl;
  font: 500 var(--spine)/1.2 var(--serif); letter-spacing: .08em;
  color: var(--ink); overflow: hidden;
}
.record .cover.blank, .notices .cover.blank { --spine: .62rem; }
.strip .cover.blank, .related-list .cover.blank { --spine: .84rem; }
.found .cover.blank, .book-head .cover.blank { --spine: .92rem; }

.meta { min-width: 0; }
.meta .title {
  margin: 0; font: 600 1.02rem/1.5 var(--serif);
  color: var(--ink); letter-spacing: .01em;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.meta .author, .meta .publisher {
  margin: 3px 0 0; color: var(--muted); font-size: .8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ひとこと。自分の言葉なので、書誌情報と区別して見せる */
.meta .note {
  margin: 8px 0 0; padding-left: 10px;
  border-left: 2px solid var(--line-2);
  color: var(--ink-2); font-size: .88rem; line-height: 1.6;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.meta .state {
  display: inline-block; margin: 8px 0 0;
  color: var(--muted); font-size: .74rem; letter-spacing: .04em;
}

/* ========== 空のとき。説明を書かず、動作を1つだけ置く ========== */
.empty { text-align: center; padding: 72px 0; color: var(--muted); }
.empty p { margin: 0 0 22px; font-family: var(--serif); }

/* ========== 入力 ========== */
input[type=text], input[type=email], input[type=password], textarea {
  width: 100%; padding: 12px 14px; font: inherit;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--field); border-radius: var(--radius);
}
input:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
textarea { resize: vertical; line-height: 1.7; }
::placeholder { color: var(--muted); opacity: 1; }

input[type=submit], button, .button {
  display: inline-block; padding: 12px 20px; font: 600 1rem var(--sans);
  color: var(--on-accent); background: var(--accent);
  border: 0; border-radius: var(--radius); cursor: pointer; text-decoration: none;
}
input[type=submit]:hover, button:hover, .button:hover { background: var(--accent-hover); }

form > * + * { margin-top: 12px; }
/* 「記録する」で、持っている本の帯と検索欄を分ける見出し。
   h2 の既定（28px 上）だと帯にくっついて、どちらの見出しか分からない */
.add-new {
  margin: 34px 0 12px;
  color: var(--muted); font: 600 .82rem/1.4 var(--sans);
  letter-spacing: .04em;
}

/* 本への出来事。**文章への動作（書く／記録する）とは軸が違う。**
   同じ形のボタンで並べると、どれが主でどれが従か分からない。
   すぐ上に「ひとこと／引用」の選択もあるので、同じ形の行が2段になっていた。
   前置きを付けて文にし、押せる言葉だけを目立たせる */
.marks-inline {
  margin: 16px 0 0;
  color: var(--muted); font-size: .84rem; line-height: 2;
}
.marks-inline button {
  padding: 0; background: none; border: 0; border-radius: 0;
  color: var(--accent); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.marks-inline button:hover { color: var(--accent-hover); background: none; }
/* 押すと何が起きるか。**画面を見ても分からないことだけ書く** */
.marks-note { display: block; margin-top: 2px; font-size: .76rem; line-height: 1.7; }

/* 「読み終えてから」「読みながら」。h2 の既定より小さく、区切りとして置く。
   **見出しを立てすぎない** —— どちらが偉いという話ではない */
.entries-head {
  margin: 30px 0 6px; color: var(--muted);
  font: 600 .78rem/1.6 var(--sans); letter-spacing: .06em;
}

/* 本棚から外す。よく押すものではないので、目立たせない。
   **戻せることを添える** —— 戻せない操作に見えると押せない */
.drop { margin: 34px 0 0; color: var(--muted); font-size: .8rem; }
.drop form { display: inline; margin: 0; }
.drop { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 10px; }
.drop .linkish {
  padding: 0; background: none; border: 0; border-radius: 0;
  color: var(--muted); font: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.drop .linkish:hover { color: var(--ink-2); background: none; }
.drop-note { display: block; margin-top: 3px; font-size: .74rem; }

/* 戻す。flash の中に出る。
   `button_to` は form を作るので、`display: inline` 任せにすると
   マークアップの細部で崩れる。**並べ方は親で決める** */
.flash { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.flash form { margin: 0; }
.flash .undo {
  padding: 3px 12px; font-size: .8rem; font-weight: 600;
  color: var(--ink); background: var(--surface);
}
.flash .undo:hover { background: var(--surface-2); }

.lookup { display: flex; gap: 8px; }
/* 「記録する」の新しい本の入口（5b）。検索欄・探す・かざす を1行に */
.lookup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.lookup-row > * { margin: 0; }
.lookup-row .outline {
  color: var(--accent); background: transparent; border: 1px solid var(--accent);
}
.lookup-row .outline:hover { background: var(--surface-2); }
/* バーコードの印（`shared/_scan_button`）。欄と同じ高さの正方形に近い形 */
.lookup-row .scan-button { display: grid; place-items: center; padding: 0 12px; }
/* 続けてかざす。**棚を移す動作**なので、文の中のリンクにして小さく置く */
.sweep-line { margin: 12px 0 0; color: var(--muted); font-size: .8rem; }
.sweep-line .linkish {
  /* `button` は inline にしても inline-block のように振る舞うので、`.scan button` の
     `width: 100%` が効いて改行されていた。幅を戻す */
  display: inline; width: auto; margin: 0; padding: 0; background: none; border: 0;
  color: var(--ink-2); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sweep-line .linkish:hover { color: var(--ink); background: none; }
.lookup > * + * { margin-top: 0; }
.lookup input[type=submit] { flex: none; }
/* `/titles` だけ、検索欄の直後に帯が来る。`.lookup` にも `.strip` にも
   間の余白が無く、見出しが入力欄の真下に貼りついていた（2026-09-28 に撮って見つけた）。
   本棚の検索欄（`.shelf-search`）と同じだけ空ける */
.lookup + .strip { margin-top: 18px; }

/* ========== 記録する ========== */
.scan { margin-top: 24px; }
.scan button {
  width: 100%; color: var(--accent); background: transparent;
  border: 1px solid var(--line-2); font-weight: 400;
}
.scan button:hover { background: var(--surface-2); }
#preview { width: 100%; border-radius: var(--radius); background: #000; }
#scan-note { color: var(--muted); font-size: .84rem; text-align: center; }

.found {
  display: grid; grid-template-columns: 84px 1fr; gap: 16px;
  align-items: start; padding: 16px; margin-bottom: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.found .cover { width: 84px; height: 118px; }
.notfound { color: var(--muted); font-family: var(--serif); }

.candidates { list-style: none; margin: 18px 0 0; padding: 0; }
.candidates li + li { border-top: 1px solid var(--line); }
/* 「さがす」の一覧（.books a）と同じ形にする。
   同じ「本を選ぶ」動作なので、見た目が違うと別物に見える */
.candidates button {
  display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: start;
  width: 100%; text-align: left; background: none; color: var(--ink);
  padding: 16px 0; font: 1rem/1.5 var(--serif); border-radius: 0;
}
.candidates button:hover { background: none; }
.candidates button:hover .title { text-decoration: underline; }
.candidates .meta { min-width: 0; }
.candidates .title { display: block; }
.candidates .subtitle {
  display: block; margin-top: 2px;
  color: var(--ink-2); font: .85rem var(--serif);
}
.candidates .author {
  display: block; margin-top: 3px;
  color: var(--muted); font: .8rem var(--sans); text-decoration: none;
}
.candidates .publisher {
  display: block; margin-top: 2px;
  color: var(--muted); font: .72rem var(--sans);
}

/* ========== 本の詳細 ========== */
.book-head {
  display: grid; grid-template-columns: 92px 1fr; gap: 18px;
  margin-bottom: 26px; align-items: start;
}
.book-head .cover { width: 92px; height: 130px; }
.book-head h1 { margin: 0 0 4px; font-size: 1.15rem; }
/* 見出しの下の副題。全体の `h1 + .subtitle` は h1 の下の余白（20px）を打ち消す負の余白で、
   ここでは h1 の余白が 4px なので、書名が2行になると副題が書名に重なっていた */
.book-head h1 + .subtitle { margin: 0 0 6px; }
.book-head .state { color: var(--muted); font-size: .76rem; margin-top: 8px; }
/* 本の詳細では状態を1行で出す。`.meta .state` は本棚の一覧のために横に並ぶ指定で、
   ジャンルの札がある本では札の右に「読んでいる」が並び、ジャンルの一部に読めた（2026-10-04）*/
.book-head .meta .state { display: block; }

.add-entry { margin-bottom: 28px; }

/* ========== 書く欄（4j → 12g）==========
 * `docs/design_handoff_himotoku_record_form`。**1つの箱に全部入れる** ——
 * 上が書く欄、その下に（開いたときだけ）引用、出来事、タグ、道具の段（写真・引用｜日付）。
 * 箱の外は「公開する｜記録する」の1行だけ。部品は減らさない。開くのは引用だけ。
 */
.as-body > * + * { margin-top: 12px; }
.as-box {
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}
.as-box:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.as-box > textarea {
  display: block; width: 100%; margin: 0;
  border: 0; border-radius: 0; background: transparent;
  /* 2行ぶんの高さから始める（1行だと、書く欄に見えにくかった。2026-10-11）*/
  padding: 14px 14px 6px; min-height: 4.8rem;
  /* 書いた量に合わせて伸びる。対応していない端末は書き始めたら数行の高さにする */
  field-sizing: content;
}
.as-box > textarea:focus { outline: none; }
.as-box > textarea:not(:placeholder-shown) { min-height: 6rem; }
.as-inner { padding: 4px 14px 10px; display: flex; flex-direction: column; gap: 10px; }

/* 引用の欄。**道具の段の「引用」を開いているときだけ見せる**（中身は言葉のすぐ下）。
   閉じても書いたものは送る（見えないだけ）*/
.as-quote { display: none; }
.as-box:has(.as-quote-toggle[open]) .as-quote { display: block; }
.as-quote textarea {
  margin: 0; padding: 2px 0 2px 13px;
  border: 0; border-left: 2px solid var(--line-2); border-radius: 0; background: transparent;
  font: 400 .95rem/1.85 var(--serif); color: var(--ink);
}
.as-quote textarea:focus { border-left-color: var(--accent); outline: none; }
.as-quote .hint { margin: 6px 0 0 15px; font-size: .74rem; }

/* 出来事。丸い札（線）。タグ（角の四角・塗り）と形を変える */
.as-inner > .as-event { margin: 0; gap: 6px; }
.as-inner > .as-event label {
  padding: 5px 13px; font-size: .8rem; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line-2);
}
.as-inner > .as-event input:checked + label {
  color: var(--on-accent); background: var(--accent); border-color: transparent; box-shadow: none;
}

/* タグ。**よく使う3つを札で並べておく。**角 6px の四角・塗り。選ばれたら濃く */
.as-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.as-tags > input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.as-tags > .as-tag {
  display: inline-block; margin: 0; padding: 5px 11px; border-radius: 6px; cursor: pointer;
  font-size: .78rem; color: var(--ink-2); background: var(--surface-2);
}
.as-tags > input:checked + .as-tag { color: var(--ink); font-weight: 600; background: var(--line); }
.as-tags > input:focus-visible + .as-tag { outline: 2px solid var(--accent); outline-offset: 2px; }
.as-more-tag > summary {
  cursor: pointer; list-style: none; padding: 5px 4px; font-size: .8rem; color: var(--accent);
}
.as-more-tag > summary::-webkit-details-marker { display: none; }
.as-more-tag[open] { flex-basis: 100%; }
.as-more-tag .as-chip { margin: 4px 0 2px; }
/* 「＋ タグ」の中も、並べたタグと同じ四角い札（出来事の丸い札と混ぜない）。
   新しいタグの欄はプレースホルダ「新しいタグ」が収まる幅（編集の画面の `＋` だけの欄より広く）*/
.as-more-tag .as-chip label {
  padding: 5px 11px; border: 0; border-radius: 6px;
  font-size: .78rem; color: var(--ink-2); background: var(--surface-2);
}
.as-more-tag .as-chip input:checked + label { color: var(--ink); font-weight: 600; background: var(--line); }
.as-more-tag .new-chip { width: 9em; border-radius: 6px; }

/* 道具の段。左に 写真・引用、右端に日付の札 */
.as-tools {
  display: flex; align-items: center; gap: 18px;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.as-tool, .as-tool > summary {
  margin: 0; padding: 4px 0; cursor: pointer; list-style: none;
  font-size: .84rem; color: var(--accent);
}
.as-tool > summary::-webkit-details-marker { display: none; }
.as-quote-toggle[open] > summary { color: var(--ink); font-weight: 600; }
/* 引用を書いて閉じたら、書いた跡を残す */
.as-box:has(.as-quote textarea:not(:placeholder-shown)) .as-quote-toggle:not([open]) > summary { font-weight: 600; }
.as-box:has(.as-quote textarea:not(:placeholder-shown)) .as-quote-toggle:not([open]) > summary::after { content: " ・"; }
/* 写真。欄は見えなくして、押せば選ぶ画面が出る（`<label>`）。選んだ枚数は `record_form.js` */
/* `input.` まで書く —— 全体の `input[type=file]` の幅のほうが強く、幅いっぱいに広がっていた。
   `label` を基準に置く —— 基準が無いと、シートの中では外へはみ出して横にスクロールした（2026-10-11）*/
.as-photo-pick { position: relative; }
input.as-hidden-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; }
.as-photo-pick.picked { font-weight: 600; }
.as-photo-pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 日付の札。透明な日付欄を重ねる（押せばすぐ選ぶ画面）。今日でないときは濃い枠 */
.as-date-chip {
  position: relative; margin: 0 0 0 auto; padding: 4px 13px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .8rem; color: var(--muted); cursor: pointer;
}
.as-date-chip.set { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.as-date-chip .as-date-input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; border: 0; cursor: pointer;
}
.as-date-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 記録の編集：出来事と公開は押せない印（ここでは変えない）*/
.as-fixed { margin: 0; font-size: .8rem; color: var(--muted); }
.edit-entry .as-foot .linkish { font-size: .9rem; }

/* 箱の下の1行。左に公開する、右に記録する */
.as-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.as-foot > input[type=submit] { flex: none; margin: 0; }
.as-foot > .as-public { margin: 0; }

/* 記録の編集の画面の日付欄・写真の欄 */
.as-date input[type=date], .edit-date {
  padding: 8px 12px; font: inherit; font-size: .9rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--field); border-radius: var(--radius);
}

/* **中身が入るまで「記録する」を薄くする**（本棚にある本のときだけ。`needs-content`）。
   できごとを選ぶ・言葉か引用かどこからを1文字書く・写真を選ぶ（`record_form.js` が `picked` を付ける）、
   のどれかで点く。**タグだけでは点かない** —— タグだけの記録はサーバが作らない（乗せる先が無い。
   `RecordsEntry#empty_record?`）。`disabled` は使わない。`:has()` の無いブラウザでは、いつも押せる */
.add-entry.needs-content:not(:has(.as-event input:checked)):not(:has(.as-photo-pick.picked)):has(textarea[name="entry[body]"]:placeholder-shown):has(textarea[name="entry[quote_body]"]:placeholder-shown):has(input[name="entry[position]"]:placeholder-shown) .as-foot > [type=submit] {
  opacity: .35; pointer-events: none;
}

/* 持っている本。**止めない** —— 2冊持つことはあるので、言うだけ。
   バーコードは `記録する` にしかないので、**書名で調べる人にはここでしか
   答えられない**（画面で買う人は手元に本が無い）*/
.books .have {
  display: inline-block; margin: 6px 0 0; padding: 2px 10px;
  font-size: .74rem; color: var(--ink-2);
  background: var(--surface-2); border-radius: 999px;
}

/* URL で渡された記録1件。**渡されたものだけを見せる。**
   いいね・返信・他の記録への導線は置かない */
.passed { max-width: 34em; margin: 8px auto 0; }
.passed .big { font: 400 1.2rem/1.95 var(--serif); color: var(--ink); }
.passed .quote.big { padding: 4px 0 4px 16px; }
.passed .said.big { margin: 0; white-space: pre-wrap; }
.passed .from-book {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px;
  align-items: center; margin: 26px 0 0;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.passed .from-book .cover { width: 44px; height: 62px; }
.passed .from-book .title { margin: 0; font: 500 .92rem/1.5 var(--serif); }
.passed .from-book .author { margin: 2px 0 0; color: var(--muted); font-size: .8rem; }
.passed .by { margin: 14px 0 0; color: var(--muted); font-size: .8rem; }
.passed .by time { margin-left: 8px; font-family: var(--mono); }

/* 6b: 先頭に「どの本の、誰の、いつの記録か」を1組で（2026-10-04）*/
.passed-head {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center;
  padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.passed-head .cover { width: 56px; height: 79px; }
.passed-head .title { margin: 0; font: 600 1rem/1.5 var(--serif); }
.passed-head .title a { color: var(--ink); text-decoration: none; }
.passed-head .author { margin: 2px 0 0; color: var(--muted); font-size: .8rem; }
.passed-head .by { margin: 4px 0 0; color: var(--muted); font-size: .78rem; }
.passed-body { margin-top: 22px; }
/* ひもとくの説明と入口。ログインしている人には出さない */
.passed-about {
  max-width: 34em; margin: 44px auto 0; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface-2); border-radius: var(--radius);
}
.passed-about p { margin: 0; color: var(--ink-2); font-size: .84rem; }
.passed-about .button { align-self: flex-start; }

/* 当たった語。**塗りつぶさない** —— 読むのは言葉のほうなので、
   地を少し変えるだけにする */
mark { background: var(--line); color: inherit; padding: 0 2px; border-radius: 2px; }

/* 読み終えた直後だけ出る、続きの巻。
   **祝わない。**続きが出ているのは事実なので、事実だけ言う */
.next-volume { margin: 0 0 24px; }
.next-volume h2 {
  margin: 0 0 6px; color: var(--muted);
  font: 600 .78rem/1.6 var(--sans); letter-spacing: .06em;
}
.next-volume .line {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px;
  align-items: start;
  padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius);
}
.next-volume .cover { width: 44px; height: 62px; }
.next-volume .title { margin: 0; font: 500 .92rem/1.5 var(--serif); color: var(--ink); }
.next-volume .publisher { margin: 2px 0 0; color: var(--muted); font-size: .78rem; }
.next-volume .acts { margin: 6px 0 0; font-size: .82rem; }

/* かざして「持っています」と答えたあと。
   **記録のフォームは出さない** —— 聞かれているのはそれではない */
.entries.recent li { border-top: 0; padding: 8px 0; }
.entries.recent { margin: 14px 0 0; }
.answer-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.answer-acts .chip { text-decoration: none; }

/* 受領書。**数だけでなく、入らなかった行も出す。**
   「失敗」「エラー」とは言わない —— 起きたことを書くだけ */
.from-file { margin: -12px 0 0; color: var(--muted); font-size: .8rem; }
.receipt { margin: 18px 0 0; }
.receipt div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.receipt dt, .receipt dd { margin: 0; }
.receipt dd { font: .95rem var(--mono); color: var(--ink); }
.receipt .quiet dt, .receipt .quiet dd { color: var(--muted); }

.left-out {
  margin: 14px 0 0; padding: 4px 14px;
  background: var(--surface-2); border-radius: var(--radius);
}
.left-out summary {
  padding: 10px 0; cursor: pointer; font-size: .86rem; color: var(--ink-2);
}
.left-out summary .n { margin-left: 8px; color: var(--muted); font: .8rem var(--mono); }
.left-out ul { list-style: none; margin: 0 0 10px; padding: 0; }
.left-out li { padding: 4px 0; font-size: .82rem; color: var(--ink-2); }
.left-out .line { margin-right: 10px; color: var(--muted); font: .76rem var(--mono); }

/* **1冊目の前で帰さない。**動作は1つだけなので、ボタンにはせず文字で置く */
.bring { margin: 16px 0 0; font-size: .86rem; }

/* 「しばらく空いている」。**横1行のリスト。**
   カードの横スクロールでは書影と題しか置けず、
   **自分が最後に書いた言葉が入らなかった** —— 戻ってくる手がかりはそちら。

   **経過日数は出さない。**「183日」と並ぶと、休んでいることを責める数に見える
   （変えない前提4）。 */
.resting { margin: 0 0 22px; }
.resting h2 { margin: 0 0 2px; color: var(--muted); font: 600 .82rem var(--sans); }
.resting ul { list-style: none; margin: 0; padding: 0; }
.resting .line {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.resting li:last-child .line { border-bottom: 0; }
.resting .cover { width: 34px; height: 48px; border-radius: 2px; }
.resting .meta { min-width: 0; }
.resting .title,
.resting .said {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resting .title { font: 500 .82rem/1.5 var(--serif); color: var(--ink); }
.resting .said { font: .82rem/1.5 var(--serif); color: var(--ink-2); }
.resting .said.only-event { color: var(--muted); }
.resting .from { font: .7rem var(--mono); color: var(--muted); white-space: nowrap; }
.resting .line:hover .title { text-decoration: underline; }

/* 記録の時系列。**日付左・本文中央・位置右の3列。**
   丸い札（pill）を並べていたころは、位置も出来事も同じ形で散らばって、
   どれが言葉でどれが目印か分からなかった。 */
.entries { list-style: none; margin: 0; padding: 0; }
.entries li {
  /* 左は `auto`。**年の出る行に合わせて列ごと広がる**ので、行がそろう */
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 14px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.entries time {
  color: var(--muted); font: .76rem var(--mono); letter-spacing: .02em;
  white-space: nowrap;
}
.entries .body { margin: 0; white-space: pre-wrap; line-height: 1.75; }
.entries .quote { margin-top: 0; }
/* 出来事。**丸い線の札**（記録のフォームの出来事と同じ形）。言葉があれば、その上に置く */
.event-line { margin: 0 0 6px; }
.event-line:last-child { margin-bottom: 0; }
.event-mark {
  display: inline-block; padding: 2px 11px; border: 1px solid var(--line-2); border-radius: 999px;
  font: .76rem/1.6 var(--sans); color: var(--ink-2); background: transparent;
}

/* 右は目印だけ。**札にしない** —— 読むものではないので、字で静かに置く */
.entries .marks {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  color: var(--muted); font: .74rem var(--mono); text-align: right;
}
.entries .marks .kind {
  font: .7rem var(--sans); letter-spacing: .04em;
}
.entries .marks .position { white-space: nowrap; }
/* 公開した記録の印。**非公開が既定**なので、公開したほうにだけ付ける。
   小さく薄い字だと見落とされたので、枠で囲む（本の詳細と記録のタブで同じ見た目）*/
.mark-public {
  display: inline-block; padding: 0 7px; border: 1px solid var(--line-2); border-radius: 999px;
  font: 500 .66rem/1.6 var(--sans); letter-spacing: .04em; color: var(--ink-2); white-space: nowrap;
}
.marks-line .mark-public { margin-left: 6px; }
/* 公開してから書き直した記録。言葉が黙って変わらないように */
.edited { margin-left: 6px; color: var(--muted); font-size: .7rem; }

/* 記録を編集する（`entries#edit`）。記録のフォームと同じ部品を、開いた状態で並べる */
.edit-head { margin: -8px 0 18px; }
.edit-head a { color: var(--ink); font-family: var(--serif); }
.edit-meta { display: block; margin-top: 4px; color: var(--muted); font: .78rem var(--mono); }
.edit-entry { max-width: 560px; }
.edit-field { margin-top: 22px; }
.edit-field h2 { margin: 0 0 8px; font: 600 .82rem/1.4 var(--sans); color: var(--muted); letter-spacing: .04em; }
.edit-actions { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
.edit-actions .linkish { color: var(--muted); }

/* 行の操作。**よく押すものではない**ので、「…」を押すと画面の下からメニューで出す（popover）。
   外を押すと閉じる。**`popover` に対応していないブラウザでは、行の中にいつも出す**（属性が無視される）*/
.row-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.row-acts .sheet-title, .row-acts .sheet-close { display: none; }
.more-acts {
  display: block; position: relative; margin-top: auto; padding: 2px 2px 0 6px;
  background: none; border: 0; border-radius: 0;
  line-height: 1; color: var(--muted); font: 400 .9rem var(--sans); letter-spacing: .1em; cursor: pointer;
}
.more-acts:hover { color: var(--ink-2); background: none; }
/* 押せる範囲は44px四方に広げ、行の高さは増やさない */
.more-acts::after { content: ""; position: absolute; inset: -16px -12px -14px -14px; }
/* `…` を右の列の下端に置くため、目印の列だけ行の高さいっぱいに伸ばす */
.entries li > .marks { align-self: stretch; }
@supports not selector(:popover-open) {
  .more-acts { display: none; }
  /* 編集はシートで開けないので、別ページへのリンクだけにする。シートそのものは出さない */
  .edit-open, .edit-sheet { display: none; }
}
@supports selector(:popover-open) {
  /* `a.tiny` の `display: block`（シートの中の項目）より強く書く。弱いと「編集する」が2つ出ていた */
  .acts-sheet[popover] a.tiny.edit-link { display: none; }
  /* 編集のシート（2026-10-11）。下からせり上がり、高さは画面の9割まで。中はスクロール。
     PC では真ん中に出す（メニューのシートと同じ）*/
  .edit-sheet[popover] {
    position: fixed; inset: auto 0 0 0; width: 100%; max-width: 620px; max-height: 92dvh; margin: 0 auto;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--ground); color: var(--ink);
    border: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, .14);
  }
  .edit-sheet::backdrop { background: rgba(0, 0, 0, .32); }
  .edit-sheet-title { margin: 4px 0 12px; font: 600 1rem var(--serif); }
  /* シートの幅いっぱいに使う。ページの中の書く欄の幅の上限（PC で 480〜560px）を外す */
  /* シートの幅いっぱいに使う。記録の行の中の `form`（`.entries form`）は小さなボタン用に
     `inline-block` にしてあり、それが効いて中身の幅に縮んでいた。ページの書く欄の幅の上限も外す */
  .edit-sheet form.add-entry { display: block; margin-bottom: 0; max-width: none; }
  .edit-sheet .sheet-back {
    width: auto; margin: 0; padding: 8px 2px; background: none; border: 0;
    font: 400 .9rem var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
  }
  .edit-sheet .sheet-back:hover { background: none; color: var(--ink-2); }
  .edit-sheet .edit-field h2 { margin-top: 0; }
  @media (min-width: 768px) {
    .edit-sheet[popover] {
      inset: 0; width: 560px; height: fit-content; margin: auto;
      padding: 14px 20px 20px; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    }
  }
}

/* アクションシート。画面の下に出し、地を暗くする。
   **`@supports` の中に置く** —— 対応していないブラウザで `[popover]` を隠すと、開く道が無くなる */
@supports selector(:popover-open) {
  .acts-sheet[popover] {
    position: fixed; inset: auto 0 0 0; width: 100%; max-width: 560px; margin: 0 auto;
    display: none; flex-direction: column; gap: 0;
    padding: 6px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); color: var(--ink);
    border: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, .14);
  }
  .acts-sheet[popover]:popover-open { display: flex; }
  .acts-sheet::backdrop { background: rgba(0, 0, 0, .32); }
  /* PC では画面の真ん中に小さいダイアログで出す。下の端に横長の板が出るのは、
     スマホの形をそのまま広い画面に出していたため（2026-10-04）*/
  @media (min-width: 768px) {
    .acts-sheet[popover] {
      inset: 0; width: 360px; height: fit-content; margin: auto;
      padding: 6px 18px 16px; border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    }
  }
  .acts-sheet[popover] .sheet-state {
    float: right; margin-left: 8px; color: var(--ink-2); font-size: .72rem;
  }
  .acts-sheet[popover] .sheet-title {
    display: block; margin: 8px 0 4px; color: var(--muted); font-size: .78rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .acts-sheet[popover] form { margin: 0; }
  .acts-sheet[popover] .tiny,
  .acts-sheet[popover] a.tiny {
    display: block; width: 100%; margin: 0; padding: 15px 2px; text-align: left;
    font: 400 1rem var(--sans); color: var(--ink); text-decoration: none;
    background: none; border: 0; border-radius: 0; border-top: 1px solid var(--line);
  }
  .acts-sheet[popover] .tiny:hover { background: var(--surface-2); }
  .acts-sheet[popover] .sheet-close {
    display: block; width: 100%; margin: 10px 0 0; padding: 13px;
    font: 600 .95rem var(--sans); color: var(--ink-2); background: var(--surface-2);
    border: 0; border-radius: var(--radius);
  }
}
.row-acts form { margin: 0; }

/* **写真だけ・出来事だけの記録に、あとから言葉を足す。**
   閉じてあるので、使わない人には存在しないのと同じ（引用の欄と同じ理屈）。
   `.row-acts` より前に出るので、消す・公開と並べない —— 行為の重さが違う */
.add-words { margin: 8px 0 0; }
.add-words summary {
  color: var(--muted); font-size: .8rem; cursor: pointer; list-style: revert;
}
.add-words summary:hover { color: var(--ink-2); }
.add-words textarea { margin-top: 8px; }
/* **左の字下げを取る。**`.as-where` の `margin-left: 15px` は、記録の欄で
   引用の罫線に揃えるためのもの。ここには罫線が無いので、下げると独りでずれる */
.add-words .as-where { margin: 8px 0 0; }
.add-words input[type="submit"] { margin-top: 10px; }


/* 続きへの道。**素のリンクが先にあり、JS はそれを格上げするだけ。**
   押す前と押したあとで場所が動かないよう、中央に置いて高さを固定する */
.more { display: flex; justify-content: center; margin: 26px 0 8px; }
.more .quiet {
  color: var(--accent); background: transparent; border: 1px solid var(--line-2);
  font-size: .9rem; padding: 10px 22px;
}
.more .quiet:hover { background: var(--surface-2); }
/* 読み上げにだけ伝える。見えている人には行が増えたことで伝わる */
.more-said {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ========== 設定 ========== */

/* 設定（10d）。**ラベル｜今の値・動作 の行にそろえる。**
   大きな欄が縦に積まれて、1画面目に「データ」しか入らなかった */
/* 段の見出しは**行と違う形にする**（2026-10-05。「見出しが普通の文字とあまり変わらず、境目が分かりにくい」）。
   設定アプリでよくある形 —— 見出しは小さく薄い色、段と段の間を広く空ける。行の文字（1rem・墨）と並んでも見分けがつく */
.set-section h2 {
  margin: 40px 0 8px; font: 600 .78rem var(--sans); color: var(--muted); letter-spacing: .08em;
}
.set-section + .set-section, .set-legal { margin-top: 0; }
/* 色を変えて戻ってきたとき、段の頭が頭の帯（PC は上に貼りつく）に隠れないように */
#display, #notices { scroll-margin-top: 96px; }
.set-section:first-of-type h2 { margin-top: 0; }
/* 持ち出せることは約束として、行の上に1文で置く（変えない前提6）*/
.carry-vow { margin: 0 0 10px; font: 500 1rem/1.5 var(--serif); }
.set-rows { border-bottom: 1px solid var(--line); }
.set-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
/* アカウントの行。ラベル｜値｜変える。押せるのは「変える」だけ */
.set-account { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto; }
.set-account .set-value { text-align: left; }
.set-account .set-act { font-size: .84rem; }
.set-label { flex: none; }
/* ラベルの下に、何の設定かを小さく（お知らせの 続巻・新刊）。行の高さが変わるので choice は中央に */
.set-what { display: block; margin-top: 2px; font-size: .75rem; color: var(--muted); }
.set-row:has(.set-what) { align-items: center; }
.set-row:has(.set-what) .set-label { flex: 1; min-width: 0; }
.set-value { min-width: 0; font-size: .84rem; color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.set-value a, .set-act { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* 書き出すの行の下に、何が入るかを小さく1行 */
.set-note { margin: -6px 0 0; padding: 0 0 12px; font-size: .78rem; color: var(--muted); }
.set-note .last-exported { display: block; margin-top: 2px; }
/* 設定の選択（外観の3択・お知らせの出す／出さない）。本棚／リストの切替（`.switch`）と同じつまみの形 */
.choice {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border-radius: 999px;
}
.choice form { margin: 0; }
.choice button, .choice span {
  display: block; width: auto; margin: 0; padding: 6px 12px; border-radius: 999px;
  font: inherit; font-size: .8rem; font-weight: 400; color: var(--muted);
  background: none; border: 0; white-space: nowrap;
}
.choice button:hover { color: var(--ink-2); background: none; }
.choice [aria-current] {
  color: var(--ink); font-weight: 600; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.set-shelf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.set-shelf form { margin: 0; }
.set-shelf .linkish, .set-logout .linkish {
  width: auto; padding: 0; background: none; color: var(--accent); font-weight: 400;
  text-decoration: underline; text-underline-offset: 2px;
}
.set-logout .linkish { color: var(--ink-2); }
.set-shelf .linkish:hover, .set-logout .linkish:hover { background: none; }
/* 規約は小さなリンクの縦の束 */
.set-legal { display: flex; flex-direction: column; gap: 8px; margin-top: 34px; font-size: .8rem; }
.set-legal a { color: var(--muted); }
/* ログアウトは一番下に1つだけ、規約から離す */
.set-logout { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); }
.set-logout form { margin: 0; }
/* 退会は**ログアウトと同じ大きさ・同じ色**（2026-10-11）。小さく薄くしていて、
   やめ方を見つけにくくしているように見えた（「やめ方を隠さない」）。並べはせず、間を空ける */
.set-leave { margin: 22px 0 0; }
.set-leave a, .set-logout .linkish {
  font: 400 .9rem var(--sans); color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 2px;
}

/* スマホの幅の設定（2026-10-12）。**iOS の設定アプリと同じ形**（アプリの設定と同じ）：
   段ごとに面でくくり、1行1項目、右に今の値と ›。PC は上の行の形（`.set-flat`）のまま */
.set-grouped { display: none; }
@media (max-width: 767px) {
  .set-grouped { display: block; }
  .set-flat { display: none; }
  /* 面との差が出るよう、地を少し沈める（暗いときは沈めない。面のほうが明るい）*/
  body:has(.set-grouped), body:has(.g-pick) { background: var(--grouped); }
}
.g-group + .g-group { margin-top: 26px; }
.g-title { margin: 0 0 6px 14px; font-size: .8rem; color: var(--muted); }
.g-card { background: var(--surface); border-radius: 10px; overflow: hidden; }
.g-card form { margin: 0; }
.g-row {
  display: flex; align-items: center; gap: 12px; min-height: 46px; margin: 0;
  padding: 11px 14px; color: var(--ink); text-decoration: none; font-size: 1rem;
}
/* 行の間の細い線は、左を空けて引く（iOS と同じ） */
.g-card > * + * {
  margin-top: 0;
  background: linear-gradient(var(--line-2), var(--line-2)) right top / calc(100% - 14px) 1px no-repeat;
}
a.g-row:active, .g-button:active { background: var(--surface-2); }
.g-label { flex: 1 1 auto; min-width: 0; }
.g-sub { display: block; margin-top: 2px; font-size: .75rem; color: var(--muted); }
.g-value { flex: 0 1 auto; min-width: 0; color: var(--muted); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 下に説明のある行（続巻・新刊）は、値を縮めない（説明のほうを折り返す）*/
.g-row:has(.g-sub) .g-value { flex: none; }
.g-links { display: flex; gap: 18px; }
.g-links a { color: var(--accent); text-decoration: none; }
/* › は文字ではなく線で描く（書体で大きさがばらつかない） */
.g-chev { flex: none; width: 8px; height: 8px; margin-left: 2px;
  border-top: 1.6px solid var(--line-2); border-right: 1.6px solid var(--line-2); transform: rotate(45deg); }
.g-check { flex: none; width: 6px; height: 11px; margin-right: 4px;
  border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg) translateY(-2px); }
/* ボタンの行（ログアウト・有料プラン・選ぶ画面の選択肢）は、行と同じ形にする */
.g-button {
  width: 100%; justify-content: flex-start; border: 0; border-radius: 0;
  background: none; font: inherit; font-size: 1rem; font-weight: 400; color: var(--ink); text-align: left;
}
.g-button:hover { background: none; }
.g-accent { color: var(--accent); }
.g-warn { color: var(--warn); }
.g-foot { margin: 6px 14px 0; font-size: .78rem; line-height: 1.6; color: var(--muted); }
.g-foot .last-exported { display: block; }
.g-pick { margin-top: 18px; }
.g-pick .is-current { font-weight: 600; }

/* 報告（App Store 規約 1.2）。目立たせない */
.report-link { margin-left: auto; font-size: .75rem; color: var(--muted); text-decoration: none; }
.report-reasons { border: 0; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.report-reasons legend { font-size: .84rem; color: var(--muted); margin-bottom: 6px; }
.report-reason { display: flex; align-items: center; gap: 10px; }
.reader-block { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); }
.reader-block .linkish { width: auto; padding: 0; background: none; color: var(--warn); font-weight: 400; text-decoration: underline; }
.g-unblock { width: auto; min-height: 0; padding: 0; justify-content: flex-end; }

.links { list-style: none; margin: 0; padding: 0; }
.links li { padding: 14px 0; border-top: 1px solid var(--line); }
.links .linkish {
  background: none; color: var(--accent); padding: 0; font-weight: 400;
}
.links .linkish:hover { background: none; text-decoration: underline; }
.hint { color: var(--muted); font-size: .84rem; margin-top: 8px; }

/* ========== flash ========== */
.flash { margin: 0; padding: 13px var(--pad); font-size: .9rem; }
.flash.alert { background: var(--warn-soft); color: var(--warn); }
/* 画面の下に浮かぶ札（スナックバー）。中身を押し下げない。
   濃い地に明るい文字（暗い配色では自然に反転する）。
   **右下の「記録する」のすぐ上**に出す —— 下タブ（70px）＋14px＋「記録する」（約46px）＋10px。
   上に出していたら、見出しと重なって読みにくかった（2026-10-05）。
   「記録する」の無い画面でも同じ高さにして、位置を一定にする */
.flash.notice {
  position: fixed; left: var(--pad); right: var(--pad); z-index: 30;
  bottom: calc(70px + 14px + 46px + 10px + env(safe-area-inset-bottom));
  padding: 10px 18px; border-radius: var(--radius);
  background: var(--ink); color: var(--surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  animation: toast-in .2s ease-out, toast-out .4s ease 3.6s forwards;
}
/* 「戻す」が付くものは、押す時間を取る */
.flash.notice:has(.undo) { animation: toast-in .2s ease-out, toast-out .4s ease 8s forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
/* PC は下タブが無く「記録する」は右下 28px。その上に、右に寄せて出す */
@media (min-width: 768px) {
  .flash.notice { left: auto; right: 28px; bottom: 92px; width: fit-content; max-width: 480px; }
}
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .flash.notice { animation: toast-out 0s 4s forwards; }
  .flash.notice:has(.undo) { animation: toast-out 0s 8.4s forwards; }
}

/* ========== 帰属表示。外さない（楽天は規約でブランディング表示が必要） ========== */
/* 画面の下端に留まる（body が縦 flex で main が伸びる）。
 * `flex: none` は、長いページで行間が詰められないようにするため。
 * `width: 100%` は main と同じ理由（交差軸の auto マージンが stretch を打ち消す）。 */
.credits {
  flex: none;
  width: 100%; max-width: 620px; margin: 0 auto;
  /* 下を広く取るのは **「記録する」の浮くボタンに重ねないため**。
     帰属表示は楽天の規約で出す義務があるので、隠れてはいけない。
     ボタンは下タブから 14px 上・高さ 46px なので、そのぶんを空ける。
     PC は横に離れているので、下の @media で戻す。 */
  padding: 28px var(--pad) 72px;
  color: var(--muted); font-size: .72rem; line-height: 1.9;
  border-top: 1px solid var(--line);
}
.credits p { margin: 0; }
.credits a { color: var(--muted); }

/* ==========================================================================
 * PC。下タブは親指で届くことが意味なので、広い画面では上に移す。
 * 本棚は1カラムだと間延びするのでグリッドにする。
 * ========================================================================== */
@media (min-width: 768px) {
  body { padding: 0; }

  .tabs {
    /* `width: 100%` は main / .masthead と同じ理由。無いと中身の幅まで縮み、
     * 「書く」の `margin-left: auto` が効かず右端に寄らない */
    position: static; width: 100%; max-width: 900px; margin: 0 auto;
    padding: 0 24px; gap: 2px;
    background: transparent; backdrop-filter: none;
    border-top: 0; border-bottom: 1px solid var(--line);
  }
  .tabs a { flex: none; padding: 18px 16px; font-size: .92rem; border-radius: 0; }
  .tabs a.on { background: transparent; box-shadow: inset 0 -2px 0 var(--accent); }
  /* PC では下タブが無いので、素直に右下に置く */
  .compose { right: 28px; bottom: 28px; padding: 14px 22px 14px 18px; }

  main { max-width: 900px; padding: 32px 24px 72px; }
  h1 { font-size: 1.5rem; margin-bottom: 26px; }

  /* 本の一覧は2列。**列数を明示する。**
   *
   * `auto-fill` + `minmax(360px, 1fr)` でも結果は2列だが（main が最大 1120px、
   * 内側 1072px なので 3×360=1080 に届かない）、列数が幅任せだと
   * 下の「1行目だけ罫線を消す」が合わなくなる。
   *
   * 記録の一覧（.records）は列にしない。時系列を横に割ると読む順が崩れる。
   * あちらは 600px の幅制限で読みやすさを作っている。 */
  .books, .candidates {
    display: grid; grid-template-columns: repeat(2, 1fr);
    column-gap: 36px;
  }
  .books li, .candidates li { border-top: 1px solid var(--line); }
  /* 1行目（左右2つ）の上には引かない。
     DOM 順の `li + li` だと右上だけに線が入って不揃いになる */
  .books li:nth-child(-n+2), .candidates li:nth-child(-n+2) { border-top: 0; }
  .cover { width: 72px; height: 102px; }

  /* 入力するもの・1冊に対して操作するものは 560px に揃える。読み書きしやすい幅。
   *
   * **候補リスト（.candidates）はここに入れない。**あれは入力ではなく「結果」で、
   * 「さがす」の結果（.books）と同じ性質のもの。
   * さがすも 検索欄560px → 結果は全幅の2列 になっている。揃えておく。 */
  .capture, .add-entry, .lookup, .found { max-width: 560px; }
  .found { grid-template-columns: 100px 1fr; }
  .found .cover { width: 100px; height: 141px; }

  .book-head { grid-template-columns: 116px 1fr; gap: 24px; }
  .book-head .cover { width: 116px; height: 164px; }
  /* 「この本について」とみんなの記録も、記録の時系列と同じ幅にする。
     入れ忘れていて、PC では罫線だけが本文の幅を超えて伸びていた（2026-10-04）*/
  .entries, .marks, .links, .about-book, .book-shared-mini { max-width: 560px; }
  .empty { padding: 104px 0; }
  .credits { max-width: 900px; padding: 44px 24px 28px; }
}

/* ==========================================================================
 * 広い画面では、行き先を左に縦で並べる
 *
 * **項目数が理由ではない。**NN/g は縦ナビが効くのを「7〜9項目を超える場合」と
 * している。ひもとくは5つなので、そこだけ見れば横のままでよかった。
 *
 * **余っている場所を使う、が理由。**NN/g が挙げる縦ナビの欠点は
 * スペース消費（コンテンツ対UI比が 12:1 → 5:1）だが、それは
 * サイドバーが本文の幅を削る前提。ひもとくの本文は上限つきなので、
 * 広い画面では左右が余っているだけだった。
 *
 * ただし**余白に収まるのは 1600px 以上**（帯1120px の外側が片側200px を
 * 超えるのがそこ）。実際には帯の中に場所を空ける。
 *
 *   768〜1199   本文 900px（横並び・上）
 *   1200〜      本文 920px（縦並び・左）  ← どの幅でも今より狭くならない
 *
 * 題名（`.masthead`）は帯の左端のまま、行き先の上に立たせる（後方の 768px 段の
 * `padding` の短縮形が効くので、ここでは動かない）。
 *
 * 狭い画面では横のまま。NN/g が縦を「向かない」と名指ししているのが
 * 小さい窓・タブレット幅なので。
 * ========================================================================== */
@media (min-width: 1200px) {
  main, .tabs, .credits, .masthead { max-width: 1120px; }
  /* 帯の中に、行き先のぶんの場所を空ける */
  main, .credits, .masthead { padding-left: calc(var(--rail) + 24px); }
  /* ログイン・登録には行き先の列が無い。空けると中身が右に寄っていた（2026-10-05）*/
  .on-gate main, .on-gate .credits { padding-left: var(--pad); }

  /* **題名とお知らせを上に残す。**行き先は `fixed` で残るのに、
     題名とお知らせだけ流れていっていた。
     **狭い画面ではやらない** —— 下タブがあるので、上にも固定すると
     上下から挟まれて本文が減る */
  .masthead {
    position: sticky; top: 0; z-index: 12;
    padding-bottom: 14px;
    background: color-mix(in srgb, var(--ground) 92%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
  }

  /* **`nav.tabs` と書く。**`.tabs a` だけだと、ファイル後方の 768px 段の
     `.tabs a { padding: 18px 14px }` に同じ詳細度で後勝ちされる（実測：
     縦に並べたのに1行 61px になっていた） */
  nav.tabs {
    position: fixed; z-index: 10;
    /* 帯の左端に置く（帯は中央寄せなので、画面の中央から半分戻る） */
    left: max(24px, calc(50% - 560px)); top: 104px; width: var(--rail);
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    max-width: none; margin: 0; padding: 0;
    border: 0; background: transparent;
  }
  /* **本文と同じ大きさにする。**下タブ・上タブでは並びが詰まるので小さく
     していたが、縦に並べた今は幅にも高さにも余裕がある。
     行き先は「次にどこへ行くか」を選ぶところで、本文より小さい理由が無い
     （実測：行き先 14.4px に対して本文 16px・本の題 16.3px だった）*/
  nav.tabs a {
    flex: none; text-align: left; padding: 9px 14px;
    font-size: 1rem; border-radius: var(--radius);
  }
  /* 横並びのときは下線で示していたが、縦だと行の下に線が走って読みにくい */
  nav.tabs a.on { background: var(--surface-2); box-shadow: none; color: var(--ink); }
  nav.tabs a:hover { background: var(--surface-2); }
}

/* ==========================================================================
 * ヘッダー。いままで「本棚」としか出ておらず、何のアプリか分からなかった
 * ========================================================================== */
/* `width: 100%` は main / .credits と同じ理由。
 * body が縦 flex なので、交差軸の auto マージンがあると stretch が効かず、
 * 中身の幅まで縮む（お知らせの点が題名にくっついてしまう） */
.masthead {
  width: 100%; max-width: 620px; margin: 0 auto;
  padding: 20px var(--pad) 0;
}
.masthead .mark {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 1.05rem/1 var(--serif);
  color: var(--ink); text-decoration: none;
}
/* 紐は枠の外へ抜ける形（上と下で切れている）。はみ出しを切る */
.mark-knot { flex: none; overflow: hidden; }
/* **字間は .masthead .mark ではなくここに置く。**
 * 親に置くと inline-flex の隙間として SVG と文字の間にも効いてしまう。
 * 既定値は JS が起点に使うので、変えるなら mark.js の LS0 も変える */
.mark-word { letter-spacing: .28em; }   /* 明朝を詰めずに置く。名前は記号として見せる */
.masthead .mark:hover { color: var(--accent); }

/* ==========================================================================
 * ログイン・登録。最初に目にする画面なので、ここだけは静かに作る
 * ========================================================================== */
.on-gate { padding-bottom: 0; }
/* ログイン前は「記録する」が出ないので、空けた分を戻す */
.on-gate .credits { border-top: 0; padding-bottom: 12px; }

/* 上の余白は、紐の輪を縦に積んだぶん詰める（14vh → 8vh）。
   390×844 で登録の4つの欄と「ログイン」のリンクまで1画面に収める */
.gate {
  max-width: 340px; margin: 0 auto;
  padding: 8vh var(--pad) 0; text-align: center;
}
/* 頭と同じ紐の輪を、名前の上に縦に積む（9d）*/
.gate-mark { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--ink); }
.gate .mark {
  margin: 0; font: 600 1.6rem/1 var(--serif);
  letter-spacing: .3em; text-indent: .3em;   /* 字間を空けた分の右寄りを戻す */
}
/* 何のサービスかを言う事実の1行。説明なのでゴシック */
.gate .lede {
  margin: 16px 0 26px; color: var(--ink-2);
  font-size: .875rem; line-height: 1.8;
}
.gate-form { text-align: left; }
.gate-form label:first-of-type { margin-top: 0; }
.gate-form input[type=submit] { width: 100%; margin-top: 16px; }
.gate-links {
  margin-top: 26px; color: var(--muted); font-size: .84rem;
}
.gate-links a { color: var(--muted); }
/* 登録の時点で規約を示す（定型約款）。目立たせないが、読める大きさにする */
.gate-consent { margin: 4px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.gate-consent a { color: var(--ink-2); }
.gate-links a:hover { color: var(--accent); }

/* Devise の既定のエラー表示 */
#error_explanation {
  margin-bottom: 14px; padding: 12px 14px;
  background: var(--warn-soft); color: var(--warn);
  border-radius: var(--radius); font-size: .88rem;
}
#error_explanation h2 { display: none; }
#error_explanation ul { margin: 0; padding-left: 1.2em; }

/* ==========================================================================
 * 空の本棚。説明を足さず、佇まいだけ作る
 * ========================================================================== */
/* 本の一覧を出す画面の空。**1冊目と同じ位置・同じ大きさ**（`.books a` の格子と書影の寸法）。
   真ん中に置くと、本があるときと目の位置がずれる */
.empty.in-books {
  display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: start;
  padding: 16px 0; text-align: left;
}
.empty.in-books .empty-mark { width: 62px; height: 88px; margin: 0; font-size: 1.4rem; }
.empty.in-books .empty-body p { margin: 2px 0 14px; }
.empty.in-books .bring { margin-top: 14px; }

/* `.empty .empty-mark` にする。`.empty p` の `margin: 0 0 22px` のほうが詳細度が高く、
   `margin: 0 auto` が負けて印だけ左に寄っていた（文は中央なので空の画面すべてでずれていた）*/
.empty .empty-mark {
  width: 76px; height: 108px; margin: 0 auto 26px;
  display: grid; place-items: center;
  font: 400 1.8rem var(--serif); color: var(--line-2);
  border: 1px solid var(--line-2); border-radius: 3px;
}

/* アカウント画面 */
label {
  display: block; margin-top: 18px;
  color: var(--muted); font-size: .82rem;
}
label + input { margin-top: 6px; }
.danger { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--line); }
.danger-button {
  margin-top: 14px; color: var(--warn); background: transparent;
  border: 1px solid var(--warn); font-weight: 400;
}
.danger-button:hover { background: var(--warn-soft); }

@media (min-width: 768px) {
  .masthead { max-width: 900px; padding: 26px 24px 0; }
  .gate { padding-top: 10vh; }
}
@media (min-width: 1200px) { .masthead { max-width: 1120px; } }

/* ==========================================================================
 * 記録（タイムライン）。本棚が「本ごと」なのに対し、こちらは「記録ごと」。
 * 書いた言葉が主役なので、書影は小さくして脇に置く。
 * ========================================================================== */
.day + .day { margin-top: 30px; }
.date {
  margin: 0 0 4px; padding-bottom: 6px;
  font: 400 .78rem/1 var(--mono); letter-spacing: .06em;
  color: var(--muted); border-bottom: 1px solid var(--line);
}

.records { list-style: none; margin: 0; padding: 0; }
.record {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px;
  padding: 16px 0; text-decoration: none; color: inherit;
  align-items: start;
}
.records li + li { border-top: 1px solid var(--line); }
.record .cover { width: 40px; height: 57px; }
.record-body { min-width: 0; }

/* 書名は脇役。記録の文脈を示すためだけに置く */
.record .title {
  margin: 0; font: 400 .8rem var(--sans); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 自分の言葉。ここが主役なので、本文と同じ大きさで明朝にする */
.record .said {
  margin: 5px 0 0; font: 1rem/1.75 var(--serif); color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.record:hover .said { text-decoration: underline; text-decoration-color: var(--line-2); }

.marks-line { margin: 0; }
.marks-line:empty { display: none; }
/* **札にするのは出来事（丸い線）とタグ（四角）だけ**（2026-10-11）。どこから・言葉の無い記録は
   本の詳細の右の目印と同じく、小さな字で置く。札の形を増やすと、どれが何か分からなくなる */
.marks-line .position, .marks-line .silent {
  display: inline-block; margin: 8px 10px 0 0; font-size: .74rem; color: var(--muted);
}
.marks-line .position { font-family: var(--mono); }

@media (min-width: 768px) {
  .records, .day { max-width: 600px; }
  .record { grid-template-columns: 46px 1fr; }
  .record .cover { width: 46px; height: 65px; }
}

/* ==========================================================================
 * 関連する本。横に流す。
 *
 * 「おすすめ」ではなく事実（続きがある・同じ人が書いている）なので、
 * 順位も星も付けない。持っている本は分かるようにだけする。
 * ========================================================================== */
.related { margin-top: 40px; }
.related h2 { margin: 0 0 12px; font-size: .95rem; }

.related-list {
  list-style: none; margin: 0; padding: 0 0 6px;
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.related-list li { scroll-snap-align: start; }
.related-list button {
  width: 78px; padding: 0; background: none; border: 0;
  color: inherit; text-align: left; font: inherit; cursor: pointer;
}
.related-list button:hover { background: none; }
.related-list .cover { width: 78px; height: 110px; }


.related-title {
  display: -webkit-box; margin-top: 7px;
  font: 400 .76rem/1.5 var(--sans); color: var(--ink-2);
  overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.related-list button:hover .related-title { text-decoration: underline; }

/* 持っている本。隠さずに印だけ付ける */
.related-list button.owned .cover { opacity: .45; }
.have {
  display: inline-block; margin-top: 4px; padding: 1px 7px;
  font-size: .68rem; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 999px;
}

@media (min-width: 768px) {
  .related { max-width: 600px; }
  .related-list button, .related-list .cover { width: 88px; }
  .related-list .cover { height: 124px; }
}

/* さがす（書誌マスタ） */
.isbn { margin: 6px 0 0; font: .74rem var(--mono); color: var(--muted); letter-spacing: .04em; }


/* 関連書籍を a 要素にしたぶんの調整 */
.related-item {
  display: block; width: 78px; text-decoration: none; color: inherit;
}
.related-item:hover .related-title { text-decoration: underline; }
.related-item.owned .cover { opacity: .45; }

/* タブが5つになるので詰める */
.tabs a { padding: 11px 2px; font-size: .78rem; }
@media (min-width: 768px) {
  .tabs a { padding: 18px 14px; font-size: .9rem; }
  .related-item, .related-list .cover { width: 88px; }
}

/* ジャンルと内容紹介。楽天から取る（openBD は持っていない） */
.genre {
  display: inline-block; margin: 8px 0 0; padding: 2px 10px;
  font-size: .74rem; color: var(--ink-2); background: var(--surface-2);
  border-radius: 999px;
}
.caption {
  margin: 22px 0 28px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.caption p {
  margin: 0; font: .9rem/1.9 var(--sans); color: var(--ink-2);
  white-space: pre-wrap;
}
@media (min-width: 768px) { .caption { max-width: 600px; } }

/* 本棚のジャンル絞り込み。横に流す */
.filters {
  display: flex; gap: 8px; margin: 0 0 4px; padding-bottom: 12px;
  align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.filters a {
  flex: none; padding: 5px 13px; white-space: nowrap;
  font-size: .8rem; color: var(--ink-2); text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 999px;
}
.filters a:hover { background: var(--surface-2); }
.filters a.on {
  color: var(--on-accent); background: var(--accent); border-color: transparent;
}

/* 読み込みの結果 */
.result { list-style: none; margin: 0 0 24px; padding: 0; }
.result li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.result .n { float: right; font: 1.05rem var(--mono); color: var(--ink); }
.result .muted, .result .muted .n { color: var(--muted); }
.import-errors {
  margin: 0 0 24px; padding: 12px 14px 12px 30px;
  background: var(--warn-soft); color: var(--warn);
  border-radius: var(--radius); font-size: .86rem;
}
input[type=file] {
  width: 100%; padding: 12px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px dashed var(--field);
  border-radius: var(--radius);
}

/* リスト */
h1 .sub {
  float: right; font: 400 .82rem var(--sans); color: var(--accent);
  text-decoration: none; line-height: 1.9;
}
h1 .sub:hover { text-decoration: underline; }

.links .n { float: right; font: .82rem var(--mono); color: var(--muted); }

.books .unlink {
  margin: 0 0 14px auto; padding: 4px 12px; display: block;
  font-size: .76rem; font-weight: 400; color: var(--muted);
  background: none; border: 1px solid var(--line-2);
}
.books .unlink:hover { background: var(--surface-2); }

/* リストへの出し入れ */
.to-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.to-list form { margin: 0; }
.chip {
  padding: 5px 13px; font-size: .8rem; font-weight: 400;
  color: var(--ink-2); background: transparent;
  border: 1px solid var(--line-2); border-radius: 999px;
}
.chip:hover { background: var(--surface-2); }
.chip.on { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.chip.on:hover { background: var(--accent-hover); }

/* 期間から作る。**名前を考えて1冊ずつ入れる手間を省く** */
.from-preset { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; }
.from-preset form { margin: 0; }

.rename { margin-top: 40px; }
.rename summary { color: var(--muted); font-size: .86rem; cursor: pointer; }
.rename > form, .rename > * + * { margin-top: 14px; }

/* 公開範囲 */
.privacy { margin-top: 36px; }
.privacy form { margin: 0; }
.privacy .hint { margin-top: 10px; max-width: 34em; }

/* ========== この本について（4d）==========
 * タグ・リスト・見え方・本棚から外す、を**ラベルつきの行**にまとめる。
 * それぞれの部品は今のまま。外側の余白だけ打ち消す */
.about-book { margin-top: 36px; }
.about-rows { margin: 12px 0 0; }
.about-row {
  display: grid; grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 12px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.about-row:last-child { border-bottom: 1px solid var(--line); }
.about-row dt { font-size: .78rem; color: var(--muted); }
.about-row dd { margin: 0; }
.about-row .tags, .about-row .to-list, .about-row .privacy, .about-row .drop { margin: 0; }
.privacy .pair { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.privacy .pair form { margin: 0; }
/* `button_to` は隠し項目の後にボタンを置くので、全体の `form > * + *` の上の余白が
   ボタンに付き、押せるほうだけ下にずれていた */
.privacy .pair form > * { margin-top: 0; }
/* 選ばれているほうは押せないので `span`。行の高さが本文のままで、押せるほう（`button`）より
   大きく・上にずれていた。札の行の高さを揃える */
.privacy .pair .chip { display: inline-block; line-height: 1.5; }
.privacy .pair span.chip { cursor: default; }

/* この本についての、みんなの記録（4e）。**いつも閉じている**。件数は出さない */
.book-shared-mini { margin-top: 28px; }
/* 「この本について」のすぐ下では罫線が2本重なるので、上の線を打ち消して続ける */
.about-book + .book-shared-mini { margin-top: 0; }
.about-book + .book-shared-mini > summary { border-top: 0; }
.book-shared-mini > summary {
  cursor: pointer; padding: 12px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font: 600 1rem/1.4 var(--serif); color: var(--ink);
}
.book-shared-mini .see-all { margin: 12px 0 0; font-size: .82rem; }
.tiny {
  display: inline-block; margin: 8px 6px 0 0; padding: 2px 10px;
  font-size: .72rem; font-weight: 400; color: var(--muted);
  background: transparent; border: 1px solid var(--line-2); border-radius: 999px;
}
.tiny:hover { background: var(--surface-2); }
.tiny.on { color: var(--on-accent); background: var(--accent); border-color: transparent; }
.entries form { display: inline-block; margin: 0; }

/* みんなの記録 */
.record .who {
  margin: 0 0 3px; font: 600 .78rem var(--sans); color: var(--ink-2);
}


/* ==========================================================================
 * リスト（2026-10-11、`docs/design_handoff_himotoku_lists` 13b・13e）
 * 見るのが先、作るのはたまに。一覧の行は書影3冊・名前・冊数。作るのは下に畳む
 * ========================================================================== */
.list-rows { list-style: none; margin: 0; padding: 0; }
.list-rows li { border-top: 1px solid var(--line); }
.list-rows li:last-child { border-bottom: 1px solid var(--line); }
.list-row {
  display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 0; color: inherit; text-decoration: none;
}
.list-row:hover .list-name { text-decoration: underline; }
.list-covers { display: flex; gap: 3px; height: 40px; }
.list-covers .cover { width: 28px; height: 40px; border-radius: 2px; --spine: .4rem; }
.list-covers.empty { border: 1px dashed var(--line-2); border-radius: 2px; }
.list-name { font: 500 .97rem/1.5 var(--serif); color: var(--ink); min-width: 0; }
.list-count { font-size: .78rem; color: var(--muted); white-space: nowrap; }

/* 作成。畳んでおき、開くと見出しの語が変わる */
.list-new { margin: 22px 0 0; }
.list-new > summary {
  cursor: pointer; list-style: none; padding: 6px 0; font-size: .9rem; color: var(--accent);
}
.list-new > summary::-webkit-details-marker { display: none; }
.list-new .when-open, .list-new[open] .when-closed { display: none; }
.list-new[open] .when-open { display: inline; color: var(--ink); font-weight: 600; }
.list-new .lookup { margin: 10px 0 0; }
.list-new-lede { margin: 20px 0 4px; font-size: .78rem; color: var(--muted); }
.list-presets { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.list-presets li {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line);
}
.preset-name { flex: 1; min-width: 0; }
.preset-count { font-size: .78rem; color: var(--muted); }
.list-presets form { margin: 0; }
.list-presets .linkish, .preset-done a {
  width: auto; padding: 0; background: none; color: var(--accent); font: inherit; font-size: .9rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.preset-done { font-size: .82rem; color: var(--muted); }

/* リストの中の見出し。右に「…」 */
.list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.list-head h1 { margin-bottom: 4px; }
.list-more { flex: none; width: 40px; height: 40px; }
.list-sub { margin: 0 0 16px; font-size: .84rem; color: var(--muted); }
/* シートの中の「編集」。開くと名前と説明の欄 */
.acts-sheet .list-edit > summary { list-style: none; cursor: pointer; }
.acts-sheet .list-edit > summary::-webkit-details-marker { display: none; }
.acts-sheet .list-edit form { padding: 8px 0 14px; }

/* 本を追加・本を削除。行全体が label、左にチェックボックス。下に固定のボタン */
.pick-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; }
.pick-head a { font-size: .9rem; }
.pick-states.filters { flex-wrap: wrap; overflow: visible; gap: 6px; margin: 0 0 12px; padding: 0; }
.pick-form { counter-reset: picked; }
.pick-books li.added { opacity: .5; }
.pick-row {
  display: grid; grid-template-columns: 22px 62px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  margin: 0; padding: 12px 0; cursor: pointer; color: inherit;
}
.pick-row input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.pick-row .title { display: block; font: 500 .95rem/1.5 var(--serif); color: var(--ink); }
.pick-row .author { display: block; font-size: .78rem; color: var(--muted); }
.pick-added { font-size: .72rem; color: var(--muted); white-space: nowrap; }
/* 選んだ数を数える（JS なし）。追加済み（disabled）は数えない */
.pick-books input[type=checkbox]:checked:not(:disabled) { counter-increment: picked; }
.pick-bar {
  position: sticky; bottom: calc(70px + 8px + env(safe-area-inset-bottom)); z-index: 5;
  margin: 12px 0 0; padding: 10px 0; background: var(--ground);
}
.pick-submit { width: 100%; margin: 0; }
.pick-form:not(:has(.pick-books input:checked:not(:disabled))) .pick-submit { opacity: .4; pointer-events: none; }
.pick-form:has(.pick-books input:checked:not(:disabled)) .pick-none { display: none; }
.pick-form:has(.pick-books input:checked:not(:disabled)) .pick-submit::before { content: counter(picked) attr(data-unit); }
@media (min-width: 768px) {
  .pick-bar { bottom: 0; }
}


/* PC の日付のカレンダー（`record_form.js`。2026-10-11）。ブラウザ既定のカレンダーが素っ気なかった。
   スマホは OS の日付の選び方のまま */
.cal[popover] {
  position: fixed; inset: auto; margin: 0; width: 264px; padding: 12px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}
.cal button {
  width: auto; margin: 0; padding: 0; font: inherit; color: inherit; background: none; border: 0;
  border-radius: 999px; cursor: pointer;
}
.cal button:disabled { color: var(--line-2); cursor: default; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; font-weight: 600; font-size: .92rem; }
.cal-head button { width: 32px; height: 32px; font-size: 1.1rem; color: var(--accent); }
.cal-head button:hover:not(:disabled), .cal-grid button:hover:not(:disabled), .cal-foot button:hover { background: var(--surface-2); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-w { font-size: .7rem; color: var(--muted); padding: 4px 0; }
.cal-grid button { height: 32px; font-size: .84rem; }
.cal-grid button.today { font-weight: 700; color: var(--accent); }
.cal-grid button.on { color: var(--on-accent); background: var(--accent); }
.cal-foot { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); text-align: right; }
.cal-foot button { padding: 4px 10px; font-size: .84rem; color: var(--accent); }

/* 人のページのリスト（2026-10-11）*/
.reader-lists { margin: 8px 0 24px; }
.reader-lists h2 { font: 600 .82rem/1.5 var(--sans); color: var(--muted); margin: 0 0 4px; letter-spacing: .05em; }

/* 運営者だけのページ（`admin/show`）。見るだけなので飾らない */
.admin-block { margin: 0 0 28px; }
.admin-block h2 { font-size: 1rem; margin: 0 0 8px; }
.admin-block form.button_to { margin-top: 8px; }
.admin-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.admin-photos img { max-width: 160px; height: auto; border-radius: 6px; }

/* 運営者だけのページのグラフ（`AdminHelper`）。SVG の色はここで当てる（インラインの style を使わない） */
.admin-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; }
.admin-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.admin-card-warn { border-color: var(--warn); background: var(--warn-soft); }
.admin-card-label { margin: 0; color: var(--muted); font-size: .8rem; }
.admin-card-value { margin: 2px 0 6px; font-size: 1.8rem; font-weight: 600; line-height: 1.1; }
.admin-card-value small { font-size: .8rem; font-weight: 400; color: var(--muted); }
.admin-card .hint { margin: 6px 0 0; font-size: .72rem; }
.chart { display: block; width: 100%; }
.chart.progress { height: 14px; }
.chart.daily { height: auto; max-height: 160px; }
.chart .track { fill: var(--surface-2); }
.chart .fill { fill: var(--accent); }
.chart .soft { fill: var(--line-2); }
.chart .goal-line { stroke: var(--warn); stroke-width: 2; }
.chart text { fill: var(--muted); font-size: 9px; }
.hbars { display: grid; gap: 6px; }
.hbar { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 3em; align-items: center; gap: 8px; font-size: .85rem; }
.hbar .chart { height: 12px; }
.hbar-value { text-align: right; font-variant-numeric: tabular-nums; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin: 0 2px 0 6px; }
.key-soft { background: var(--line-2); }
.key-fill { background: var(--accent); }