/*
  Note Markdown UI
  - Softer, more elegant highlight for toggles
  - Polished motion for expand/collapse
  - Accessible focus-visible styles
  Variables can be tuned per page/theme.
*/

:root {
  /* Accent and surfaces */
  --note-accent: 212 100% 47%; /* hsl values; tweak hue/sat/lightness */
  --note-bg: hsl(var(--note-accent) / 0.10);
  --note-bg-hover: hsl(var(--note-accent) / 0.16);
  --note-ring: hsl(var(--note-accent) / 0.35);
  --note-card-bg: #fafafa;
  --note-card-border: rgba(0, 0, 0, 0.16);
  --note-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --note-radius: 8px;
  --note-expand-x: 8px; /* block highlight outward growth (left/right) */
  --note-expand-y: 2px; /* block highlight outward growth (top/bottom) */
  --note-toggle-expand: var(--note-expand-x); /* backward compat */
  --note-inline-spread: 3px; /* inline highlight outward spread (no reflow) */
  /* Media defaults inside note content */
  --note-media-max-width: 720px; /* cap large images/videos; tweak per page */
  --note-media-radius: 6px;

  /* Motion */
  --note-dur-open: 260ms;
  --note-dur-close: 200ms;
  --note-ease-open: cubic-bezier(0.2, 0.8, 0.2, 1);
  --note-ease-close: cubic-bezier(0.4, 0, 0.2, 1);
  --note-translate-y: 4px;

  /* Layout helpers */
  --note-pad-x: 28px; /* a bit more breathing room left/right */
  --note-pad-y: 8px;
  --note-pad-top: 16px; /* more room for collapse chip */
  --note-action-gap: 8px; /* extra space reserved when floating action appears */
}

@media (prefers-color-scheme: dark) {
  :root {
    --note-card-bg: #17181a;
    --note-card-border: rgba(255, 255, 255, 0.18);
    --note-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    --note-bg: hsl(var(--note-accent) / 0.12);
    --note-bg-hover: hsl(var(--note-accent) / 0.20);
  }
}

/* 行内 note（统一“整块 hover”成卡片样式） */
span.note-toggle {
  display: inline; /* 形成一个整体矩形区域 */
  padding: 0 1px; /* 默认尽量不影响排版 */
  margin: 0;
  border-radius: var(--note-radius);
  white-space: normal;
  word-break: break-word;
  line-break: loose;
  cursor: pointer;
  text-decoration: none; /* 使用自定义下划线效果 */

  /* 关键：让换行时每行单独包裹背景/圆角 */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* 移除下划线效果，保持纯净文本 */
  background: none;
}

/* 若位于段落（或标题、列表项）开头，不额外左缩进 */
p > span.note-toggle:first-child,
li > span.note-toggle:first-child,
blockquote > span.note-toggle:first-child,
h1 > span.note-toggle:first-child,
h2 > span.note-toggle:first-child,
h3 > span.note-toggle:first-child,
h4 > span.note-toggle:first-child,
h5 > span.note-toggle:first-child,
h6 > span.note-toggle:first-child {
  margin-left: 0;
}
/* 行内 hover / 高亮 / 可访问态：与块级保持一致的背景与描边 */
span.note-toggle.__hl__,
span.note-toggle:hover {
  /* Inline highlight uses underline only (no rounded box) */
  background: transparent;
  box-shadow: none;
  text-decoration-line: underline;
  text-decoration-color: var(--note-ring);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
/* Open state keeps stronger highlight */
span.note-toggle.is-open {
  background: transparent;
  box-shadow: none;
  text-decoration-line: underline;
  text-decoration-color: var(--note-ring);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
/* Keyboard focus */
/* Block toggles: remove default outline; use the same pseudo highlight as hover/open */
div.note-toggle:focus { outline: none; }
div.note-toggle:focus-visible { outline: none; }
/* Inline toggles use underline for focus (no extra box) */
span.note-toggle:focus { outline: none; }
span.note-toggle:focus-visible {
  outline: none;
  text-decoration-line: underline;
  text-decoration-color: var(--note-ring);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* 块级 note（多行为卡片样式） */
div.note-toggle {
  display: block; /* 块级显示，覆盖通用 inline 设定 */
  cursor: pointer;
  padding: 0 0; /* 默认无额外水平留白（避免文字跳动） */
  margin: 0; /* 去掉负 margin */
  border-radius: var(--note-radius);
  position: relative; /* 供伪元素绘制更大的高亮框 */
  z-index: 0; /* 让 ::before 放在内容下方 */
}
div.note-toggle.__hl__,
div.note-toggle:hover {
  background: transparent; /* 背景移到伪元素，避免文本位移 */
  text-decoration: none; /* 避免对块内标题/段落无效的下划线 */
}
div.note-toggle.is-open {
  background: transparent; /* 背景移到伪元素，避免文本位移 */
}

/* 使用伪元素在元素外扩绘制更大的高亮框，不改变布局尺寸 */
div.note-toggle.__hl__::before,
div.note-toggle:hover::before,
div.note-toggle.is-open::before,
div.note-toggle:focus-visible::before {
  content: "";
  position: absolute;
  /* top/bottom expand 2px; left/right expand 8px by default */
  inset: calc(0px - var(--note-expand-y)) calc(0px - var(--note-expand-x));
  border-radius: calc(var(--note-radius) + var(--note-expand-x));
  background: var(--note-bg);
  border: 1px solid var(--note-ring);
  pointer-events: none;
  z-index: -1; /* 在文字下方 */
}

/* Align note card with outward expanded block highlight when open */
.note-toggle.is-open + .note-content {
  margin-left: calc(-1 * var(--note-expand-x));
  margin-right: calc(-1 * var(--note-expand-x));
}

/* 避免块级高亮时内部首/尾元素的默认上下外边距造成拥挤或跳动 */
div.note-toggle > :first-child { margin-top: 0; }
div.note-toggle > :last-child { margin-bottom: 0; }

.note-content {
  /* 基础样式 */
  --pad-top: var(--note-pad-top);
  border: 1px solid var(--note-card-border);
  padding: var(--pad-top) var(--note-pad-x) var(--note-pad-y);
  margin: 1.5em 0; /* 稍微拉开一点，避免箭头被上方内容遮住 */
  background: var(--note-card-bg);
  border-radius: var(--note-radius);
  box-shadow: var(--note-shadow);

  /* 让箭头能正确定位与显示 */
  position: relative;
  overflow: visible; /* 外层可见，让伪元素箭头不被裁剪 */
}

/* 顶部箭头伪元素（绘制在外层，不受裁剪） */
.note-content::before,
.note-content::after {
  z-index: 1;
  pointer-events: none;
  position: absolute;
}

/* 内层：专门用于折叠动画与裁切 */
.note-content__body {
  overflow: hidden;
}

/* 动画态：通过 height/opacity 过渡（作用于 body） */
.note-content__body.__anim {
  transition:
    height var(--note-dur, var(--note-dur-open)) var(--note-ease, var(--note-ease-open)),
    opacity var(--note-dur, var(--note-dur-open)) var(--note-ease, var(--note-ease-open)),
    transform var(--note-dur, var(--note-dur-open)) var(--note-ease, var(--note-ease-open));
  will-change: height, opacity, transform;
}
.note-content__body.__collapsed {
  height: 0 !important;
  opacity: 0;
  transform: translateY(calc(-1 * var(--note-translate-y)));
}

/* 顶部中间的平滑箭头 */
.note-content::before {
  content: "";
  position: absolute;
  top: -10px; /* 箭头向上凸出的高度 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent var(--note-card-border) transparent; /* 外边框 */
}

.note-content::after {
  content: "";
  position: absolute;
  top: -9px; /* 内层覆盖，保证边框粗细一致 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 9px 9px 9px;
  border-style: solid;
  border-color: transparent transparent var(--note-card-bg) transparent; /* 背景色 */
}

/* 悬浮收起按钮（右上角） */
.note-action-close {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  opacity: 0.9;
  z-index: 2;
  pointer-events: auto;
  color: #111 !important;
}
.note-action-close:hover {
  opacity: 1;
}
.note-action-close svg {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform var(--note-dur-open) var(--note-ease-open);
}
/* rotate chevron when note is visible */
.note-content:not([hidden]) .note-action-close svg {
  transform: rotate(180deg);
}

.note-anchor {
  display: none;
}

/* 顶部右侧的收起按钮（默认 absolute，进入视口顶时切换 fixed） */
.note-action-wrap {
  position: absolute; /* 默认：跟随 note 内部流动 */
  top: calc(var(--btn-top, var(--pad-top)) + 6px); /* 与顶部边框拉开距离 */
  right: 12px;
  z-index: 4;
  pointer-events: none;
  transition: transform var(--note-dur-open) var(--note-ease-open), opacity var(--note-dur-open) var(--note-ease-open);
  opacity: 0.96;
}
/* 进入吸附态：固定在窗口顶部（由 JS 切换 .is-fixed） */
.note-action-wrap.is-fixed {
  position: fixed;
  top: 12px; /* 想更靠顶就设为 0 */
  right: var(--fixed-right, 12px); /* JS 计算：距离窗口右边的偏移 */
  transform: translateY(-4px) scale(0.98);
}

/* 别再额外把正文往下推了；如确实要留空，再调成更小值 */
.note-content.has-floating-action {
  /* 顶部为按钮预留额外空间，避免过近 */
  padding-top: calc(var(--pad-top) + var(--note-action-gap));
}

/* 把正文首块元素的上外边距清零，避免与按钮错层 */
.note-content__body > :first-child {
  margin-top: 0 !important;
}
.note-content__body > :first-child > :first-child {
  margin-top: 0 !important;
}
.note-content__body
  > :is(h1, h2, h3, h4, p, ul, ol, blockquote, table, pre, dl):first-child {
  margin-top: 0 !important;
}

/* Media inside markdown notes */
.note-content img,
.note-content video,
.note-content svg,
.note-content canvas,
.note-content iframe,
.note-content embed {
  /* Keep natural size up to max; never overflow container */
  max-width: min(100%, var(--note-media-max-width));
  height: auto;
  border-radius: var(--note-media-radius);
}

.note-content audio {
  width: min(100%, var(--note-media-max-width));
  margin: 8px auto;
  display: block;
}

.note-content figure { margin: 0.75rem auto; }
.note-content figcaption {
  text-align: center;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.6);
}

/* Media in main markdown content (outside note boxes) */
.note-markdown-root img,
.note-markdown-root video,
.note-markdown-root svg,
.note-markdown-root canvas,
.note-markdown-root iframe,
.note-markdown-root embed {
  max-width: min(100%, var(--note-media-max-width));
  height: auto;
  border-radius: var(--note-media-radius);
}
.note-markdown-root audio {
  width: min(100%, var(--note-media-max-width));
  margin: 8px auto;
  display: block;
}

.note-markdown-root figure { margin: 0.75rem auto; }
.note-markdown-root figcaption {
  text-align: center;
  font-size: 0.9em;
  opacity: 0.75;
}

/* Reduced motion: keep things snappy but non-distracting */
@media (prefers-reduced-motion: reduce) {
  .note-content__body.__anim {
    transition: none;
  }
  .note-action-wrap {
    transition: none;
  }
}