.analysis-panel {
  /* グラフは記録の3つ目の見方: 一覧の区画の中、検索の行より下に入る(claim:graph-as-third-view-of-records-new-record-from-graph-top-priority)。 */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
  /* 種類の色(--graph-diary など)は style.css の :root のトークン(ECD)。ここはグラフだけが使う線と面。 */
  --graph-parent-line: color-mix(in srgb, var(--ink) 15%, var(--paper));
}
.analysis-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.analysis-segments,
.analysis-actions,
.analysis-depth {
  display: flex;
  gap: 3px;
  align-items: center;
}
/* グラフの6つの見方と「孤立・再生」は見た目の決まり5章の分段: 溝は字の 6%、選んだ札はライトで地の色・ダークで字の 14%、角 2px、影なし */
.analysis-segments,
.analysis-actions {
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  padding: 2px;
}
.analysis-actions {
  margin-left: auto;
}
.analysis-segments {
  flex-wrap: wrap;
  min-width: 0;
}
.graph-button {
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  min-height: 40px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
}
.analysis-segments .graph-button {
  white-space: nowrap;
}
.graph-button:hover {
  color: var(--ink);
}
.graph-button[aria-pressed="true"],
.graph-button[aria-pressed="true"]:hover {
  color: var(--on-thumb);
  background: var(--frame-thumb);
  font-weight: 600;
}
.graph-button:disabled {
  opacity: 0.4;
  cursor: default;
}
.graph-button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.analysis-actions .graph-button {
  font-size: 14px;
  padding: 6px 10px;
  white-space: nowrap;
}
.analysis-stage {
  position: relative;
  flex: 1;
  min-height: 200px;
  overflow: hidden;
}
.analysis-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  /* 図の点は区画の縁で切らない。四辺の手前 24px で薄れて消える(切り口を見せない。CD 10/17)。幅は view.js の EDGE_FADE と同じ。 */
  mask-image:
    linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent),
    linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-composite: intersect;
  cursor: grab;
}
.analysis-stage[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: graph-loading 1s linear infinite;
  pointer-events: none;
}
@keyframes graph-loading {
  to {
    transform: rotate(360deg);
  }
}
.analysis-depth {
  position: absolute;
  top: 8px;
  right: 12px;
  background: var(--white);
  border: var(--frame-hair) solid var(--line);
  border-radius: 2px;
}
.analysis-depth[hidden],
.analysis-tip[hidden],
.analysis-notice[hidden] {
  display: none;
}
.analysis-tip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: var(--white);
  font-size: 12px;
  /* 名前を見せるだけ。指先の行き先を奪わない。 */
  pointer-events: none;
  width: auto;
  max-width: 240px;
}
.analysis-tip span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.analysis-notice {
  position: absolute;
  top: 48%;
  width: 100%;
  text-align: center;
  color: var(--muted);
}
/* 「記録」の帯: 区画の下端に固定。押す前後で位置・大きさ・字の位置を変えない(CD 10/17)。面は溝(字の 6%)。 */
.analysis-list {
  flex: none;
  padding: 0 20px;
  font-size: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
  border-top: 0.5px solid var(--line);
}
.analysis-list summary {
  cursor: pointer;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.analysis-list summary::marker,
.analysis-list summary::-webkit-details-marker {
  content: "";
  display: none;
}
/* 記号は開く向き: 閉じて ⌃、開いて ⌄。回すだけで位置は変えない。 */
.analysis-list summary > svg {
  width: 14px;
  height: 14px;
  flex: none;
  transform: rotate(180deg);
}
.analysis-list[open] summary > svg {
  transform: none;
}
/* 開いた「記録」は画面の中に収め、続きがあることを下の薄れで見せる(見た目の決まり9章: 操作の直後の1枚)。
   札は下端のまま、一覧はそのすぐ上に決まった高さで出て、グラフの舞台がその分だけ縮む。 */
/* 出す・隠すは舞台の縮みと同じ CSS の1か所で決める(同じコマで変わり、札が一瞬も動かない)。 */
.analysis-list-body {
  display: none;
  /* 図を残す: 1440 で区画の 50% まで、狭い幅で 55% まで(CD 10/17)。 */
  max-height: 50%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 20px 20px;
  border-top: 0.5px solid var(--line);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.analysis-panel:has(.analysis-list[open]) .analysis-list-body {
  display: block;
}
@media (max-width: 700px) {
  .analysis-list-body {
    max-height: 55%;
  }
}
/* 下の記録は一覧と同じカードと石垣(style.css の .masonry・.record-rows)。ここは置き場の余白と「さらに表示」だけ。 */
.analysis-list-body > [data-key="analysis-cards"] {
  margin-top: 12px;
}
.analysis-list-more {
  display: block;
  margin: 12px auto;
}
.analysis-legend {
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  pointer-events: none;
}
.analysis-legend-body {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.analysis-legend-toggle {
  pointer-events: auto;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: 4px;
}
.analysis-legend[data-collapsed="true"] {
  right: auto;
}
/* 狭い幅で開いた凡例: 「凡例」の札のすぐ下に出る浮く面。点はその下に隠れてよい(覆うだけで図は動かさない)。
   面・罫・影はメニューと同じ(--white・--line・影なし)、角は 10px(CD 10/17)。札の位置は開け閉めで変えない。 */
.analysis-legend[data-floating="true"] .analysis-legend-body {
  position: absolute;
  z-index: 3;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  /* 区画の幅(凡例の箱は左右 12px を空けて区画いっぱい)を超えない。窓が広くても区画が狭い時に切れない。 */
  max-width: 100%;
  padding: 6px;
  pointer-events: auto;
  background: var(--white);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
}
.analysis-legend-toggle[hidden],
.analysis-legend-body[hidden],
.analysis-legend[hidden] {
  display: none;
}
.graph-button.analysis-legend-item {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--ink);
  background: transparent;
}
.analysis-glyph {
  width: 12px;
  height: 12px;
  flex: none;
}
.analysis-legend-item[aria-pressed="false"] {
  color: var(--muted);
}
.analysis-legend-item[aria-pressed="false"] > :where(.analysis-glyph, .analysis-edge-glyph, .icon) {
  opacity: 0.35;
}
.analysis-glyph.diary circle {
  fill: var(--graph-diary);
}
.analysis-glyph.quote path {
  fill: var(--paper);
  stroke: var(--graph-quote);
  stroke-width: 1.5;
}
.analysis-glyph.tag circle {
  fill: var(--graph-tag);
}
.analysis-glyph.book rect {
  fill: var(--graph-book);
}
.analysis-glyph.person circle {
  fill: var(--graph-person);
  stroke: var(--graph-person-border);
  stroke-width: 2;
}
svg.analysis-glyph .hollow {
  display: none;
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
}
.analysis-legend[data-mode="map"] .analysis-glyph .hollow {
  display: inline;
}
.analysis-legend[data-mode="map"] .analysis-glyph .solid {
  display: none;
}
@media (max-width: 700px) {
  /* 左上の共通のサイドバーのボタン(固定、右端 52px)を避ける。押せる大きさを保ち、入らなければ道具を2段目へ。 */
  .analysis-header {
    padding: 8px 8px 8px 56px;
    gap: 3px;
    flex-wrap: wrap;
  }
  .analysis-segments .graph-button {
    font-size: 12px;
    padding: 5px 7px;
  }
  .analysis-actions .graph-button {
    font-size: 13px;
    padding: 6px 8px;
  }
}
.analysis-depth-label {
  font-size: 12px;
  color: var(--muted);
  padding: 0 4px 0 6px;
}
.analysis-local-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  font-size: 13px;
  max-width: min(60vw, 420px);
}
.analysis-local-info strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analysis-local-info span {
  color: var(--muted);
  white-space: nowrap;
}
.analysis-local-info .graph-button,
.analysis-depth .graph-button {
  white-space: nowrap;
}
.analysis-depth {
  flex-wrap: wrap;
  max-width: calc(100% - 24px);
}

.analysis-edge-glyph.strong {
  color: var(--graph-near-line);
}
.analysis-edge-glyph.weak {
  color: var(--graph-parent-line);
}
.analysis-depth-label[hidden],
.analysis-depth .graph-button[hidden] {
  display: none;
}

.analysis-notice-inline {
  top: 8px;
  font-size: 11px;
  pointer-events: none;
}
.analysis-semantic-link {
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
  pointer-events: auto;
}
.analysis-mark-favorite .icon {
  color: var(--frame-favorite);
}
.analysis-mark-bookmark .icon {
  color: var(--frame-bookmark);
}

.analysis-cluster-legend {
  display: flex;
  flex: 0 0 100%;
  flex-wrap: wrap;
  max-height: 96px;
  overflow-y: auto;
  pointer-events: auto;
}
.analysis-cluster-legend[hidden],
.analysis-legend-item[hidden] {
  display: none;
}
.analysis-cluster-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cluster-color);
  flex: none;
}
.analysis-cluster-item[aria-pressed="true"] {
  color: var(--cluster-color);
  background: var(--soft);
}

.analysis-settings {
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  width: min(300px, calc(100% - 16px));
  max-height: calc(100% - 16px);
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--soft);
  border-radius: 9px;
  font-size: 12px;
}
.analysis-settings[hidden],
.analysis-force-notice[hidden] {
  display: none;
}
.analysis-settings-section {
  border-bottom: 1px solid var(--soft);
  margin-bottom: 8px;
  padding-bottom: 8px;
}
.analysis-settings-section summary {
  cursor: pointer;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
}
.analysis-settings-fields {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.analysis-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 0;
}
.analysis-setting output {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.analysis-setting input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  accent-color: var(--ink);
}
.analysis-setting input[type="checkbox"] {
  accent-color: var(--ink);
}
.analysis-forces-fixed summary,
.analysis-forces-fixed .analysis-settings-fields {
  opacity: 0.4;
}
.analysis-force-notice {
  color: var(--muted);
  margin: 8px 0 0;
}
.analysis-settings :where(input, summary):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}