/* ==================================================================
   mindmap5.3 · css/outline-view.css —— 两处导图大纲共享的紧凑 InfoCard 视图
   虚拟列表、节点字段、汇总分组、搜索高亮与移动触达统一在此定义；
   面板骨架仍分别归 shell.css / manager-outline.css 管理。
   ================================================================== */

.mmov-tree {
  min-width: 100%;
  color: var(--ui-text);
  font-family: var(--ui-font);
}
.mmov-spacer { width: 1px; pointer-events: none; }
.mmov-drag-handle {
  flex: none;
  width: var(--outline-drag-handle-size);
  height: var(--outline-drag-handle-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--ui-button-radius);
  color: var(--ui-muted);
  background: transparent;
  font: 18px/1 var(--ui-font);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.mmov-drag-handle:hover { color: var(--ui-accent); background: var(--ui-hover-bg); }
.mmov-drag-handle:disabled { opacity: var(--outline-drag-source-opacity); cursor: not-allowed; touch-action: auto; }
.mmov-drag-handle:focus-visible { outline: var(--ui-focus-width) solid var(--ui-accent); outline-offset: var(--ui-focus-offset); }
.mmov-dragging, .mmov-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.mmov-dragging .mmov-item.is-drag-source { opacity: var(--outline-drag-source-opacity); }
.mmov-dragging .mmov-item.is-drop-parent { outline: var(--ui-focus-width) solid var(--ui-accent); outline-offset: calc(-1 * var(--ui-focus-width)); background: var(--ui-accent-soft); }
.mmov-drop-line, .mmov-drag-badge, .mmov-drag-status { position: fixed; pointer-events: none; z-index: var(--z-outline-drag); }
.mmov-drop-line { height: var(--outline-drop-line-width); background: var(--ui-accent); border-radius: var(--ui-pill-radius); }
.mmov-drag-badge {
  max-width: min(260px, calc(100vw - 16px));
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--ui-accent);
  border-radius: var(--ui-button-radius);
  background: var(--ui-panel);
  color: var(--ui-text);
  font: var(--ui-font-caption)/1.5 var(--ui-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mmov-drag-badge.is-invalid { border-color: var(--ui-border); color: var(--ui-muted); }
.mmov-drag-status {
  box-sizing: border-box;
  display: grid;
  gap: 2px;
  padding: 6px 10px;
  border: 2px solid var(--ui-accent);
  border-radius: var(--ui-button-radius);
  background: var(--ui-panel);
  color: var(--ui-accent);
  font: 14px/1.4 var(--ui-font);
}
.mmov-drag-status-target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text); font-size: 12px; }
.mmov-drag-status.is-invalid { border-color: var(--ui-border); color: var(--ui-muted); }
@media (pointer: coarse) {
  .mmov-tree, .mmov-dragging { --outline-drop-zone-h: var(--outline-drop-zone-touch-h); }
  .mmov-drag-handle { width: var(--editor-touch-target); height: var(--editor-touch-target); }
}
.mmov-window { display: grid; gap: 6px; min-width: 100%; }

.mmov-item {
  --mmov-ac: var(--lv-root);
  --mmov-group-ac: var(--mmov-ac);
  position: relative;
  box-sizing: border-box;
  width: calc(100% - var(--mmov-indent, 0px));
  min-width: 250px;
  margin-left: var(--mmov-indent, 0px);
  padding: 8px 9px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--mmov-ac) var(--outline-card-border), var(--ui-border));
  border-radius: var(--mmov-corner, 9px);
  background: color-mix(in srgb, var(--mmov-ac) var(--outline-node-tint), var(--outline-card-base));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ui-text) var(--mmov-glow-soft, 3%), transparent),
    inset 3px 0 10px -10px color-mix(in srgb, var(--mmov-ac) var(--mmov-glow-pct, 35%), transparent);
  overflow: hidden;
  cursor: default;
}
.mmov-item.is-summary,
.mmov-item.is-summary-member {
  background: color-mix(in srgb, var(--mmov-group-ac) var(--outline-summary-tint), var(--outline-card-base));
}
.mmov-item:hover { border-color: color-mix(in srgb, var(--mmov-ac) 58%, var(--ui-border)); }
.mmov-item.is-active {
  border-color: var(--sel-ring);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sel-ring) 48%, transparent);
}
.mmov-item:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }

.mmov-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.mmov-caret,
.mmov-caret-space {
  width: 24px;
  height: 24px;
  flex: none;
}
.mmov-caret {
  appearance: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ui-muted);
  font: 700 18px/1 var(--ui-font);
  transform: rotate(0deg);
  cursor: pointer;
  transition: transform var(--ui-motion-fast), background var(--ui-motion-fast), color var(--ui-motion-fast);
}
.mmov-caret.is-open { transform: rotate(90deg); }
.mmov-caret:hover { color: var(--ui-text); background: var(--ui-hover-bg); }
.mmov-number {
  flex: none;
  color: var(--ui-muted);
  font: 650 10.5px/1.25 var(--ui-font-mono);
  letter-spacing: -.02em;
}
.mmov-summary-sig {
  flex: none;
  color: var(--lv-sum);
  font: 800 11.5px/1.25 var(--ui-font);
}
.mmov-title {
  min-width: 0;
  color: var(--mmov-ac);
  font-size: var(--mmov-title-size, 14px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
  background: linear-gradient(var(--mmov-grad-dir, 93deg), var(--mmov-g-from, var(--ui-text)) 8%, var(--mmov-g-to, var(--mmov-ac)) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mmov-item.is-summary .mmov-title {
  color: var(--mmov-ac);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.mmov-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.mmov-tag {
  --t-c: var(--tag-blue-a);
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--t-c) 46%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--t-c) 12%, transparent);
  color: var(--t-c);
  font: 650 10px/1.25 var(--ui-font);
  overflow-wrap: anywhere;
}
.mmov-locate {
  appearance: none;
  flex: none;
  visibility: hidden;
  height: 24px;
  margin-left: auto;
  padding: 0 7px;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-panel);
  color: var(--ui-accent);
  font: 700 10px/1 var(--ui-font);
  white-space: nowrap;
  cursor: pointer;
}
.mmov-item:hover .mmov-locate,
.mmov-item:focus-within .mmov-locate { visibility: visible; }

.mmov-items {
  display: grid;
  gap: 5px;
  margin: 7px 0 0 29px;
}
.mmov-frag {
  --mmov-frag-color: var(--frag-text);
  position: relative;
  min-width: 0;
  padding: 6px 7px 6px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--mmov-frag-color) 6%, transparent);
  color: var(--ui-text);
  font: 500 11.5px/1.55 var(--ui-font);
  overflow-wrap: anywhere;
}
.mmov-frag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 3px;
  background: var(--mmov-frag-color);
}
.mmov-frag--link { --mmov-frag-color: var(--frag-link); display: grid; gap: 2px; }
.mmov-frag--image { --mmov-frag-color: var(--frag-image); }
.mmov-frag--quote { --mmov-frag-color: var(--reader-quote-color, var(--reader-highlight)); cursor: pointer; }
.mmov-frag--capture { --mmov-frag-color: var(--reader-capture-color, var(--reader-highlight)); cursor: pointer; }
.mmov-frag[aria-disabled="true"] { cursor: not-allowed; opacity: .72; }
.mmov-frag:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.mmov-frag a { color: var(--frag-link); text-decoration: none; border-bottom: 1px dotted currentColor; }
.mmov-link-url { display: block; color: var(--ui-muted); font: 500 9.5px/1.4 var(--ui-font-mono); overflow-wrap: anywhere; }

.mmov-expandable { display: block; min-width: 0; }
.mmov-clamp {
  display: -webkit-box;
  min-width: 0;
  white-space: pre-wrap;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
.mmov-clamp.is-expanded { display: block; overflow: visible; -webkit-line-clamp: unset; }
.mmov-text-toggle {
  appearance: none;
  margin: 4px 0 0;
  padding: 1px 0;
  border: 0;
  background: transparent;
  color: var(--ui-accent);
  font: 700 10px/1.3 var(--ui-font);
  cursor: pointer;
}
.mmov-text-toggle[hidden] { display: none; }

.mmov-image { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 7px; }
a.mmov-image { color: inherit; text-decoration: none; }
.mmov-image img {
  grid-column: 1;
  width: 88px;
  height: 62px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--frag-image) 42%, var(--ui-border));
  border-radius: 6px;
  background: var(--ui-input-bg);
}
.mmov-image-fallback {
  display: none;
  grid-column: 1;
  min-height: 62px;
  place-items: center;
  border: 1px dashed var(--ui-border);
  border-radius: 6px;
  color: var(--ui-muted);
  font-size: 10px;
  text-align: center;
}
.mmov-image.is-error img { display: none; }
.mmov-image.is-error .mmov-image-fallback { display: grid; }
.mmov-image-caption { grid-column: 2; color: var(--ui-text); }

.mmov-quote-copy { display: block; color: var(--ui-text); }
.mmov-source {
  display: block;
  margin-top: 4px;
  color: var(--mmov-frag-color);
  font: 600 10px/1.45 var(--ui-font);
  overflow-wrap: anywhere;
}
.mmov-capture-thumb {
  display: grid;
  width: min(100%, 180px);
  min-height: 72px;
  max-height: 132px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mmov-frag-color) 42%, var(--ui-border));
  border-radius: 6px;
  background: var(--ui-input-bg);
}
.mmov-capture-thumb img { width: 100%; max-height: 132px; object-fit: contain; }
.mmov-capture-thumb img:not([src]) { display: none; }
.mmov-capture-thumb img[src] + span { display: none; }
.mmov-capture-thumb span { padding: 8px; color: var(--ui-muted); font-size: 10px; text-align: center; }
.mmov-capture-thumb.is-error img { display: none; }
.mmov-capture-thumb.is-error img[src] + span,
.mmov-capture-thumb.is-error span { display: block; }

.reader-color-red { --reader-quote-color: var(--reader-highlight-red); --reader-capture-color: var(--reader-highlight-red); }
.reader-color-yellow { --reader-quote-color: var(--reader-highlight-yellow); --reader-capture-color: var(--reader-highlight-yellow); }
.reader-color-blue { --reader-quote-color: var(--reader-highlight-blue); --reader-capture-color: var(--reader-highlight-blue); }
.reader-color-green { --reader-quote-color: var(--reader-highlight-green); --reader-capture-color: var(--reader-highlight-green); }
.reader-color-purple { --reader-quote-color: var(--reader-highlight-purple); --reader-capture-color: var(--reader-highlight-purple); }

.mmov-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 7px 0 0 29px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--mmov-ac) 24%, var(--ui-border));
  color: var(--ui-muted);
  font: 500 10.8px/1.55 var(--ui-font);
}
.mmov-note-label {
  flex: none;
  padding-top: 1px;
  color: color-mix(in srgb, var(--mmov-ac) 70%, var(--ui-muted));
  font-weight: 750;
}
.mmov-note .mmov-expandable { flex: 1; min-width: 0; }

.mmov-item mark {
  padding: 0 1px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--reader-highlight-yellow) 32%, transparent);
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
.mmov-empty {
  margin: 20px 8px;
  color: var(--ui-muted);
  font: 500 12px/1.6 var(--ui-font);
  text-align: center;
}

@media (pointer: coarse) {
  .mmov-locate { visibility: visible; }
  .mmov-caret { width: var(--editor-touch-target); height: var(--editor-touch-target); }
  .mmov-locate { min-height: var(--editor-touch-target); }
  .mmov-text-toggle { min-height: var(--editor-touch-target); padding: 7px 0; }
  .mmov-frag[role="button"] { min-height: var(--editor-touch-target); }
}

@media (max-width: 899px) {
  .mmov-window { gap: 8px; }
  .mmov-item { min-width: 0; }
  .mmov-header { min-height: var(--editor-touch-target); }
  .mmov-caret { width: var(--editor-touch-target); height: var(--editor-touch-target); }
  .mmov-locate { min-height: var(--editor-touch-target); }
  .mmov-text-toggle { min-height: var(--editor-touch-target); padding: 7px 0; }
  .mmov-frag--link a { display: inline-flex; min-height: var(--editor-touch-target); align-items: center; }
  .mmov-frag[role="button"] { min-height: var(--editor-touch-target); }
}

@media (prefers-reduced-motion: reduce) {
  .mmov-caret,
  .mmov-item { transition-duration: .01ms; }
}

/* trial-05：大纲控件采用公共原型表面；节点策略来自各自目标快照。 */
.mmov-tree { font:var(--ui-font-size)/var(--ui-line-height) var(--ui-font); color:var(--ui-text); }
.mmov-window { gap:8px; }
.mmov-item {
  padding:10px 12px; border:1px solid var(--ui-border); border-left:3px solid var(--mmov-ac);
  background:var(--ui-panel); box-shadow:none;
}
.mmov-item:hover { border-color:color-mix(in srgb,var(--mmov-ac) 50%,var(--ui-border)); background:var(--ui-row-hover-bg); }
.mmov-item.is-active { border-color:var(--mmov-ac); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mmov-ac) 16%,transparent); background:var(--ui-accent-soft); }
.mmov-item.is-summary,.mmov-item.is-summary-member { background:color-mix(in srgb,var(--mmov-group-ac) 5%,var(--ui-panel)); }
.mmov-caret { border-radius:var(--ui-button-radius); color:var(--ui-muted); font-family:var(--ui-font); }
.mmov-caret .mm-icon { width:16px; height:16px; }
.mmov-caret:hover { color:var(--ui-hover-text); background:var(--ui-hover-bg); }
.mmov-number { color:var(--ui-muted); font:var(--ui-font-caption)/1.5 var(--ui-font-mono); }
.mmov-title { font-weight:var(--ui-weight-strong); line-height:1.5; letter-spacing:0; }
.mmov-item:is([data-map-style="elegant"], [data-map-style="ink"], [data-map-style="compact"], [data-map-style^="ribbon"]) .mmov-title { color:var(--ui-text); background:none; -webkit-text-fill-color:currentColor; }
.mmov-tag { border-radius:var(--ui-pill-radius); border:0; padding:2px 6px; font:10px/1.5 var(--ui-font); }
.mmov-item:is([data-map-style="elegant"], [data-map-style="ink"], [data-map-style="compact"], [data-map-style^="ribbon"]) .mmov-tag { --t-c:var(--mmov-ac); color:var(--mmov-ac); background:color-mix(in srgb,var(--mmov-ac) 8%,var(--ui-panel)); }
.mmov-item:is([data-map-style="elegant"], [data-map-style="ink"], [data-map-style="compact"], [data-map-style^="ribbon"]) .mmov-summary-sig { color:var(--mmov-ac); }
.mmov-locate { height:var(--ui-control-h); padding:5px 8px; border-color:transparent; border-radius:var(--ui-button-radius); color:var(--ui-accent); background:transparent; font:var(--ui-font-caption)/1.4 var(--ui-font); }
.mmov-locate:hover { background:var(--ui-accent-soft); }
.mmov-items { margin-top:9px; gap:7px; }
.mmov-frag { border-radius:var(--ui-section-radius); color:var(--ui-text); font:var(--ui-font-label)/1.7 var(--ui-font); }
.mmov-item:is([data-map-style="elegant"], [data-map-style="ink"], [data-map-style="compact"], [data-map-style^="ribbon"]) .mmov-frag { --mmov-frag-color:var(--mmov-ac); background:color-mix(in srgb,var(--mmov-ac) 5%,var(--ui-panel)); }
.mmov-item:is([data-map-style="elegant"], [data-map-style="ink"], [data-map-style="compact"], [data-map-style^="ribbon"]) .mmov-frag::before { background:color-mix(in srgb,var(--mmov-ac) 50%,transparent); width:2px; }
.mmov-source { color:var(--ui-muted); font:10px/1.6 var(--ui-font); }
.mmov-item[data-map-style="ink"] .mmov-title { color:var(--card-ink-text); }
.mmov-item:is([data-map-style="compact"], [data-map-style^="ribbon"]) .mmov-title { color:var(--mmov-title-ac); }
.mmov-item[data-subtree-tags="true"] .mmov-tag { --t-c:var(--mmov-tag-ac); color:var(--card-header-text); background:var(--mmov-tag-ac); }
.mmov-item:is([data-map-style="ink"], [data-map-style="compact"], [data-map-style^="ribbon"]) .mmov-frag { color:var(--card-compact-text); }
.mmov-note { padding-top:0; border:0; color:var(--ui-muted); font:var(--ui-font-label)/1.8 var(--ui-font); }
.mmov-note-label { color:var(--ui-muted); font-weight:var(--ui-weight-medium); }
.mmov-text-toggle { color:var(--ui-accent); font:var(--ui-font-caption)/1.5 var(--ui-font); }
.mmov-link-url { color:var(--ui-muted); font-family:var(--ui-font-mono); }.mmov-quote-copy,.mmov-image-caption { color:var(--ui-text); }
.mmov-item:focus-visible,.mmov-caret:focus-visible,.mmov-locate:focus-visible,.mmov-text-toggle:focus-visible,.mmov-frag:focus-visible { outline:var(--ui-focus-width) solid var(--ui-accent); outline-offset:var(--ui-focus-offset); box-shadow:var(--ui-focus); }

/* 拖动期间每行只有三个固定高度的投放区，长正文不再挤占落点空间。 */
/* 主大纲由虚拟列表恢复滚动锚点，避免浏览器在行高恢复后再次补偿。 */
#outline-tree, .mmov-dragging { overflow-anchor: none; }
.mmov-dragging .mmov-item {
  padding: 0;
  height: calc(var(--outline-drop-zone-h) * 3 + 2px);
  border-radius: var(--ui-button-radius);
}
.mmov-drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--outline-drop-zone-h);
  min-width: 0;
  padding: 0 10px;
  color: var(--ui-text);
  font: 12px/1.4 var(--ui-font);
}
.mmov-drop-zone[data-outline-drop="before"] { box-shadow: inset 0 -1px var(--ui-border); }
.mmov-drop-zone[data-outline-drop="after"] { box-shadow: inset 0 1px var(--ui-border); }
.mmov-drop-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mmov-ac); font-size: 13px; }
.mmov-drop-label, .mmov-drop-unavailable { flex: none; }
.mmov-drop-unavailable { color: var(--ui-muted); font-size: 11px; }
.mmov-drop-zone[aria-disabled="true"] { color: var(--ui-muted); background: var(--ui-input-bg); }
.mmov-drop-zone.is-drop-active { background: var(--ui-accent-soft); color: var(--ui-accent); outline: 2px solid var(--ui-accent); outline-offset: -2px; font-weight: var(--ui-weight-strong); }
.mmov-drop-zone.is-drop-active[aria-disabled="true"] { outline: 2px dashed var(--ui-muted); outline-offset: -2px; background: var(--ui-input-bg); color: var(--ui-muted); }