/* notes.css — mizzy.org/notes
 *
 * Broadsheetデザインシステム（新聞紙面）を日本語の長文向けに適用したもの。
 * 色・間隔・角丸はすべてBroadsheetのトークンから取る。値の直書きをしない。
 *
 * Broadsheetからの逸脱は2点、どちらも日本語のため:
 *   1. 和文は明朝体。Source Serif 4に日本語字形が無いので、
 *      欧文=Source Serif 4 / 和文=ヒラギノ明朝ほかで組む。
 *   2. 本文は15px/1.55ではなく17px/1.9。日本語は字面が大きく、
 *      同じ設定だと詰まって読めない。
 *
 * 紙のみ。ダークモードは持たない（Broadsheetはダーク面を持たないシステム）。
 */

/* ---- トークン（Broadsheet） ---- */

:root {
  --color-bg:      #f3f2f2;
  --color-surface: #eae9e9;
  --color-text:    #201e1d;
  --color-accent:  #0088b0;
  --color-accent-2:#d6006c;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #e9f8ff;
  --color-accent-200: #cbeeff;
  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-200: #ffdee6;
  --color-accent-2-700: #aa0b56;

  /* 欧文・和文とも明朝／セリフ。外部フォントを読み込まず、OS標準だけで組む
     （CLAUDE.mdの「すべて自己完結」の規約）。
     BroadsheetはSource Serif 4を指定しているが、Web配信が必要になるため
     ここでは同系統のOS標準セリフで代える。
     日本語のフォールバックを欧文より後ろに置くことで、
     ラテン文字だけが欧文セリフで組まれる。 */
  --font-body: Georgia, "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho",
               YuMincho, "Noto Serif JP", "Songti SC", serif;
  --font-heading: var(--font-body);
  --font-heading-weight: 600;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-6: 30px;
  --space-8: 40px;

  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 4px;

  /* コラムの幅。見出し・本文・表・図がすべてこの1本に揃う。
     本文だけを狭くしない — 狭くすると右に空白が残り、
     表や図と左右端が食い違って紙面が裂けて見える。 */
  --measure: 62rem;

  /* index専用。カードを4〜5列並べるための幅。本文には使わない。 */
  --index-wide: 90rem;

  /* ---- 図（インラインSVG）用の別名 ----
   * 各ノートのページ固有CSSはこの短い名前でBroadsheetのトークンを参照する。
   * 図の中で色を直書きしないための唯一の入口。新しい図もこの名前を使う。
   */
  --bg:        var(--color-bg);
  --surface:   var(--color-neutral-100);
  --sunken:    var(--color-surface);
  --text:      var(--color-text);
  --muted:     color-mix(in srgb, var(--color-text) 62%, transparent);
  --faint:     color-mix(in srgb, var(--color-text) 45%, transparent);
  --rule:      var(--color-neutral-300);
  --accent:    var(--color-accent);
  --accent-bg: var(--color-accent-100);
  --accent-2:  var(--color-accent-2);
  --link:      var(--color-accent-700);
  --sans:      var(--font-body);
  --mono:      var(--font-mono);
  --radius:    var(--radius-md);
}

/* ---- ベース ---- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.9;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  /* 日本語の折り返し。
     - line-break: strict — 小書き仮名(ゃゅょっ)や長音符の前で折り返さない。
       既定(auto)だと「しょ」が行頭に落ちるような切れ方をする。
     - word-break: normal — 欧文語は単語の途中で切らない。
     日本語は文字単位で折り返せるので、この2つで日本語も欧文も正しくなる。 */
  line-break: strict;
  word-break: normal;
}

a {
  color: var(--color-accent-700);
  text-underline-offset: 3px;
  /* 単語の途中では折り返さない。URLだけは別扱い（下の a[href^="http"]）。
     `anywhere` を全リンクに掛けると、Terraformのような欧文語が
     途中で切れて読めなくなる。 */
  overflow-wrap: break-word;
}
/* 長いURLを本文にそのまま書いた行だけは、どこで切ってでも収める。
   URLは分割できる位置が無いので、指定しないと1語がそのまま横幅になる。 */
a[href^="http"] { overflow-wrap: anywhere; }
a:hover { color: var(--color-accent-2-700); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ---- ヘッダ ---- */
/* 新聞の題字。太い罫と細い罫で日付欄を挟む、紙面のフルニチュア。
   Broadsheetで罫が許されるのはここだけ。 */

header.site {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) 0;
}
/* index はカードを広く並べるので、題字の罫も同じ幅に合わせる */
body.index header.site { max-width: var(--index-wide); }

header.site .rule {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-1);
  border-top: 3px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
  padding-top: var(--space-2);
  font-size: 13px;
}

header.site .home {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
}

header.site a:not(.home) {
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  text-decoration: none;
}
header.site a:not(.home):hover { color: var(--color-accent-700); }
header.site .spacer { margin-left: auto; }

/* ---- 記事 ---- */

article.note {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) 6rem;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: -0.01em;
}

h1 {
  font-size: 40px;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
}

/* 見出しは罫でも箱でもなく、余白と級数で区切る（Broadsheetの原則） */
h2 {
  font-size: 27px;
  line-height: 1.4;
  margin: var(--space-8) 0 var(--space-3);
}

h3 {
  font-size: 21px;
  line-height: 1.5;
  margin: var(--space-6) 0 var(--space-2);
}

h4 {
  font-size: 18px;
  line-height: 1.6;
  margin: var(--space-4) 0 var(--space-2);
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

p.meta {
  margin: 0 0 var(--space-6);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 14px;
  line-height: 1.7;
}

/* 作成日 / 更新日。出典と同じ行の族だが、数字なので級数を一段落とす */
p.meta .dates {
  display: block;
  margin-top: var(--space-1);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
p.meta .dates time { font-variant-numeric: tabular-nums; }
p.meta .dates .sep { margin: 0 0.5em; }

ul, ol { padding-left: 1.4em; margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-1); }
/* 表の中のリストは幅を制限しない */
td ul, td ol, th ul, th ol { max-width: none; }

strong { font-weight: 600; }
em, i, cite { font-style: italic; }

blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  font-style: italic;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite { display: block; font-size: 14px; font-style: normal; }

hr, .hr {
  height: 1px; border: 0;
  margin: var(--space-8) 0;
  background: var(--color-divider);
}

del { color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* ---- コード ---- */

code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--color-surface);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

pre {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 var(--space-4);
}
pre code { background: none; padding: 0; font-size: inherit; }

/* ---- 表 ---- */
/* 見出し行の下だけ罫を引く。セルを箱で囲わない。 */

.scroll {
  overflow-x: auto;
  margin-bottom: var(--space-6);
  /* 横スクロールできることを示す影。右端に余白があるときは消える。 */
  background:
    linear-gradient(to right, var(--color-bg) 30%, transparent) left / 40px 100% no-repeat,
    linear-gradient(to left,  var(--color-bg) 30%, transparent) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--color-text) 18%, transparent), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--color-text) 18%, transparent), transparent) right / 14px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  line-height: 1.7;
}

/* 狭い画面での表。
   列数が少ない表は詰めれば収まるので枠内に収める。
   列数が多い表を無理に収めると1文字ずつ改行されて読めなくなるので、
   横スクロール（.scroll が担当）に任せ、最低幅を確保する。 */
@media (max-width: 50rem) {
  table { font-size: 14px; }
  th, td { padding: var(--space-1) var(--space-2); }

  /* 2〜3列は枠内に収める */
  .scroll.narrow table { table-layout: fixed; width: 100%; max-width: 100%; }

  /* 4列以上は各列に最低幅を与えて横スクロールさせる */
  .scroll:not(.narrow) table { min-width: 34rem; }
  .scroll:not(.narrow) th,
  .scroll:not(.narrow) td { min-width: 6.5rem; }
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  /* 狭い画面で表が横に伸びるのを防ぐ。
     セル内の長い識別子（carina.state.json 等）が分割できないと、
     列がその幅で固定され、表全体がビューポートを超える。 */
  overflow-wrap: anywhere;
}
/* 表の中のコードは折り返しを許す（本文中のコードはそのまま） */
td code, th code { overflow-wrap: anywhere; white-space: normal; }
th {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  border-bottom: 1px solid var(--color-text);
}
tbody tr:last-child td { border-bottom: 0; }

table.compare td:first-child {
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  width: 28%;
}

/* ---- 精度ノート ---- */
/* AIとの対話による探索記録の但し書き。読者への前提条件なので、
   紙面では「囲み記事」として本文と区別する。 */

.accuracy {
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent-2);
  font-size: 15px;
  line-height: 1.8;
}
.accuracy > h2, .accuracy > h3 {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: var(--font-heading-weight);
  color: var(--color-accent-2-700);
}
.accuracy dl { margin: 0; }
.accuracy dt {
  font-size: 13px;
  letter-spacing: 0.03em;
  font-weight: var(--font-heading-weight);
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin-top: var(--space-3);
}
.accuracy dt:first-child { margin-top: 0; }
.accuracy dd { margin: 0 0 0; }
.accuracy ul { margin-bottom: 0; padding-left: 1.2em; }
.accuracy p:last-child, .accuracy ul:last-child { margin-bottom: 0; }

/* ---- 用語の断り ---- */
/* このノート群だけの造語であることを初出で断る囲み。警告ではないので
   シアン(対話的な要素と同じ第一のスポットカラー)で刷り、マゼンタは
   精度ノートに取っておく。 */

.term {
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
  font-size: 15px;
  line-height: 1.8;
}
.term > h2, .term > h3 {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: var(--font-heading-weight);
  color: var(--color-accent-700);
}
.term p:last-child { margin-bottom: 0; }

/* ---- ステータス ---- */
/* 書きかけを完成品に見せないための表示。スポットカラーで刷る。 */

.status {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: var(--font-heading-weight);
  padding: 0.1em 0.6em;
  border-radius: var(--radius-md);
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
  vertical-align: 0.22em;
  margin-left: var(--space-2);
}
.status.done {
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}

/* 未着手の章に置く但し書き */
.draft {
  margin: var(--space-3) 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-neutral-300);
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.draft p:last-child { margin-bottom: 0; }

/* 訂正履歴 */
ul.corrections {
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* 本文中の未解決マーカー (要確認: …) */
.todo {
  color: var(--color-accent-2-700);
  font-size: 0.92em;
}

/* ---- 目次 ---- */
/* 箱で囲わず、番号と余白で並べる */

.toc { margin: var(--space-6) 0 var(--space-8); }
.toc a {
  display: block;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
  text-decoration: none;
  color: inherit;
}
.toc a:first-child { border-top: 1px solid var(--color-divider); }
.toc a:hover .t { color: var(--color-accent-2-700); }
.toc .t {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  color: var(--color-accent-700);
}
.toc .d {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin-top: 2px;
}

/* ---- 対比 ---- */

.contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin: var(--space-6) 0;
  font-size: 15px;
  line-height: 1.8;
}
.contrast > div > h3 {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
/* 「実際は」の側だけシアンで刷る */
.contrast > .yes { border-left: 2px solid var(--color-accent); padding-left: var(--space-3); }
.contrast p:last-child { margin-bottom: 0; }

/* ---- 番号付きステップ ---- */

ol.steps { list-style: none; padding: 0; margin: var(--space-6) 0; counter-reset: step; }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--space-4) var(--space-6);
  margin: 0;
}
ol.steps > li:last-child { padding-bottom: 0; }
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  color: var(--color-accent);
  line-height: 1.6;
}
ol.steps > li > strong { display: block; }

/* ---- 補足 ---- */

aside.note-aside {
  margin: var(--space-6) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-neutral-300);
  font-size: 15px;
  line-height: 1.8;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
aside.note-aside p:last-child { margin-bottom: 0; }

/* ---- 図 ---- */

figure { margin: var(--space-8) 0; }
figure svg { display: block; width: 100%; height: auto; }
figcaption {
  margin: var(--space-3) 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ---- 確度マーカー ---- */
/* このノートの主張がどの種類のものかを見出し直下で示す。
   verified=確認済み / interpretation=解釈 / ai-sourced=AI由来 / normative=規範的主張 */

.epistemic {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 0.1em 0.6em;
  border-radius: var(--radius-md);
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
}
.epistemic.verified      { background: var(--color-accent-100); color: var(--color-accent-800); }
.epistemic.ai-sourced    { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.epistemic.normative     { background: var(--color-neutral-200); color: var(--color-neutral-800); }

/* ---- 逆リンク ---- */
/* このノートを参照している他のノート。evergreen notesでは
   どこから参照されているかが、そのノートの位置を示す。 */

.backlinks {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}
.backlinks h2 {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.backlinks ul { list-style: none; padding: 0; margin: 0; }
.backlinks li { margin-bottom: 2px; font-size: 15px; }

/* ---- 関連・タグ ---- */

nav.links {
  margin-top: 4rem;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-text);
}
nav.links h2 {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
nav.links ul { list-style: none; padding: 0; margin: 0; }
nav.links li { margin-bottom: var(--space-1); font-size: 16px; }

nav.links li.unwritten { color: color-mix(in srgb, var(--color-text) 45%, transparent); }
nav.links li.unwritten::after {
  content: "未執筆";
  margin-left: var(--space-2);
  font-size: 12px;
  color: var(--color-neutral-600);
}

p.tags {
  margin-top: var(--space-4);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
p.tags a {
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  text-decoration: none;
}
p.tags a:hover { color: var(--color-accent-2-700); }

/* ---- index ---- */

.index-head {
  max-width: var(--index-wide);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) 0;
}
.index-head h1 { margin-bottom: var(--space-3); }
.index-head p {
  color: color-mix(in srgb, var(--color-text) 65%, transparent);
  font-size: 16px;
  max-width: 46rem;   /* 説明文だけは行長を抑える */
}

/* ---- 読む道筋 ----
 * 80枚から始めると「どれを読むか」という選択自体が足を止める。
 * リンクを辿った4本の道筋を入口として置く。
 */

.paths {
  max-width: var(--index-wide);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) 0;
}
.paths > h1 {
  margin: 0 0 var(--space-4);
  font-size: 21px;
  line-height: 1.4;
}
.paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-6) var(--space-8);
}
.paths > h1 { grid-column: 1 / -1; }

.path h3 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-divider);
  font-size: 16px;
}
.path h3 .n {
  font-size: 19px;
  color: var(--color-accent);
}
.path .lead {
  margin: 0 0 var(--space-2);
  font-size: 12.5px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}
.path ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.path ol li {
  counter-increment: step;
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: 3px;
  font-size: 13.5px;
  line-height: 1.55;
}
.path ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  font-size: 10.5px;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
  line-height: 1.9;
}

/* 「すべてのノート」の見出し */
.index-head h2.all {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-text);
  font-size: 21px;
}
.index-head h2.all .count {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
/* 並び順の断り書き。件数より一段弱く */
.index-head h2.all .order {
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in srgb, var(--color-text) 42%, transparent);
}

/* 本文の検索。タグの絞り込みと併用でき、両方に合うものだけが残る。
   罫と箱で構造化しないのがBroadsheetの原則なので、入力欄も箱にせず、
   下に罫1本だけ引く（紙面の記入欄の見え方）。 */
.search {
  max-width: var(--index-wide);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) 0;
}
.search .field { display: block; }
.search input {
  font: inherit;
  font-size: 15px;
  width: 100%;
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 1px solid var(--color-neutral-400);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  -webkit-appearance: none;
  appearance: none;
}
.search input::placeholder { color: color-mix(in srgb, var(--color-text) 38%, transparent); }
.search input:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}
/* 検索欄は打つそばから結果が変わるので、件数を出さないと
   「何も出ない」のか「絞り込めている」のかが分からない。
   `.status` は書きかけを示すチップで別物なので、名前を分けている。 */
.search .hits {
  margin: var(--space-2) 0 0;
  min-height: 1.4em;
  font-size: 12px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* 0本はマゼンタ。稀な状態を示す第二のスポットカラー */
.search .hits.none { color: var(--color-accent-2-700); }

/* 一致箇所。カード本文の抜粋にだけ出る */
.cards .card mark {
  background: var(--color-accent-200);
  color: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* タグの絞り込み。ノートが増えると一覧だけでは辿れないため。 */
.filters {
  max-width: var(--index-wide);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.filters button {
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  padding: 0.15em 0.7em;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  cursor: pointer;
}
.filters button:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.filters button.on {
  background: var(--color-accent-100);
  border-color: var(--color-accent);
  color: var(--color-accent-800);
}

/* 一覧はカードで並べる。
   Broadsheetは罫と箱でページを構造化しないが、.card は
   「listings のような個別の項目」のための唯一の箱として用意されている。
   ノート1本ずつは独立した項目なので、ここは .card を使ってよい場面。

   一覧は本文ではないので、読みやすさのためのコラム幅(--measure)に縛られない。
   カードを4〜5列並べるために --index-wide まで広げる。 */
.cards {
  max-width: var(--index-wide);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) 6rem;
  /* 絞り込んで1本になってもページが極端に縮まないよう、一画面ぶん確保する。
     縮みすぎるとスクロール位置が文書の外に出て、ブラウザが上へ引き戻す。 */
  min-height: 100vh;
  display: grid;
  /* 広い画面で4〜5列。min() は、ビューポートが最小幅より狭いときに
     カードを縮められるようにするため（無いと狭い画面で画面幅を超える）。

     auto-fill であって auto-fit ではない。auto-fit は余った列を潰すので、
     絞り込みで1〜2本になると残ったカードが横いっぱいに伸びて、
     同じカードが検索のたびに違う幅になる。auto-fill は空の列を残すため、
     何本に絞っても幅が変わらない。 */
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
/* カードは影で浮かせず、細罫1本で囲む（Broadsheetは影ではなく罫線）。
   天の3pxの罫が確信度を示す。順序ではなく種類なので、罫の高さは全部同じ。 */
/* 高さは固定。要約と抜粋は長さがまちまちなので、内容で高さが決まると
   検索欄に1文字打つたびに全カードの背が変わって紙面が揺れる。
   高さを内容から切り離しておけば、絞り込みで残ったカードが動かない。 */
.cards a.card {
  display: flex;
  flex-direction: column;
  height: 17rem;
  padding: 0 0 var(--space-3);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.cards a.card:hover {
  border-color: var(--color-accent);
  background: var(--color-neutral-100);
}

/* 確信度の罫。verified=シアン / interpretation=灰 / normative=濃い灰 / ai-sourced=破線 */
.cards .card .rule { display: block; height: 3px; width: 100%; }
.cards a.card.verified       .rule { background: var(--color-accent); }
.cards a.card.interpretation .rule { background: var(--color-neutral-300); }
.cards a.card.normative      .rule { background: var(--color-neutral-700); }
.cards a.card.ai-sourced     .rule {
  background: repeating-linear-gradient(90deg,
    var(--color-neutral-700) 0 3px, transparent 3px 6px);
}

/* 罫のぶん padding を内側に持たせる */
.cards .card .body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) 0;
  flex: 1;
}
/* 題は3行まで。いま一番長い題が3行なので、切れる題は無い。
   行数を決めておかないと、題の長さでカードの背が変わる。 */
.cards .card h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-accent-700);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.cards a.card:hover h2 { color: var(--color-accent-2-700); }
.cards .card p {
  margin: 0;
  flex: 1;
  font-size: 12.5px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  /* 溢れたぶんは切る。カードの高さが固定なので、切らないと
     タグが下へ押し出される（要約でも検索の抜粋でも同じ） */
  min-height: 0;
  overflow: hidden;
}
.cards .card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

/* 確信度の凡例 */
.legend {
  max-width: var(--index-wide);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.legend i {
  display: inline-block;
  width: 16px; height: 3px;
  margin-right: var(--space-1);
  vertical-align: 3px;
}
.legend i.verified       { background: var(--color-accent); }
.legend i.interpretation { background: var(--color-neutral-300); }
.legend i.normative      { background: var(--color-neutral-700); }
.legend i.ai-sourced {
  background: repeating-linear-gradient(90deg,
    var(--color-neutral-700) 0 3px, transparent 3px 6px);
}

/* ---- 幅を揃える ----
 * 見出し・本文・表・図の左右端を、すべて同じ1本のコラムに揃える。
 * 紙面のコラムは1本で、そこから飛び出すものを作らない（Broadsheetの原則）。
 * `width: 100%` は article の内容ボックス（--measure から padding を引いた幅）。
 * このブロックは、後続の margin ショートハンドで打ち消されないよう末尾に置く。
 */

figure, .contrast, .scroll, .bleed {
  width: 100%;
  margin-left: 0;
  translate: none;
}

/* ---- 狭い画面 ---- */

@media (max-width: 50rem) {
  body { font-size: 16px; line-height: 1.85; }
  h1 { font-size: 30px; }
  h2 { font-size: 23px; }
  h3 { font-size: 19px; }
  .contrast { grid-template-columns: 1fr; gap: var(--space-4); }
  figure, .contrast, .scroll, .bleed {
    width: auto;
    margin-left: 0;
    translate: none;
  }
}