/* Base palette (可按需换成你站点的主题色) */
:root{
  --alert-note:      #2563eb; /* blue 600 */
  --alert-tip:       #16a34a; /* green 600 */
  --alert-important: #7c3aed; /* violet 600 */
  --alert-warning:   #d97706; /* amber 600 */
  --alert-caution:   #dc2626; /* red 600 */

  --alert-fg:        #111827; /* gray 900 */
  --alert-bg-alpha:  0.02;    /* 背景色透明度 */
  --alert-hover-alpha: 0.08;

  --callout-border:  #3b82f6; /* primary for blockquote */
  --muted-fg:        #111827;
  --muted-bg-alpha:  0.03;
  --muted-hover-alpha: 0.10;
}

/* ---------- Alert base ---------- */
.alert {
  margin: 1.25rem 0;
  border-left: 4px solid currentColor;
  border-radius: 8px;
  padding: .5rem 1rem .1rem 1rem;
  background-color: rgba(0,0,0,var(--alert-bg-alpha));
  color: var(--alert-fg);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.alert:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}

/* Set brand color per type via currentColor */
.alert-note      { color: var(--alert-note); }
.alert-tip       { color: var(--alert-tip); }
.alert-important { color: var(--alert-important); }
.alert-warning   { color: var(--alert-warning); }
.alert-caution   { color: var(--alert-caution); }

/* Header / title */
.alert__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .25rem;
  padding-bottom: .25rem;
  cursor: default;
}
.alert__title{
  margin: 0;
  font-weight: 600;
  color: color-mix(in oklab, var(--alert-fg) 90%, black 10%);
  /* 如果需要最大兼容，可改成直接 #111827 */
}

/* Content */
.alert__content{ padding-top: .25rem; }
.alert__prose{
  color: color-mix(in oklab, var(--alert-fg) 92%, black 8%);
  max-width: none;
  font-size: .95rem;
  line-height: 1.6;
}

/* ---------- Collapsible via <details>/<summary> ---------- */
/* 去掉原生 disclosure marker，自己画箭头 */
.alert--collapsible > summary{ list-style: none; }
.alert--collapsible > summary::-webkit-details-marker{ display: none; }

.alert--collapsible .alert__header{
  cursor: pointer;
  position: relative;
  padding-right: 1.5rem; /* 给自定义箭头留位置 */
}

/* 自定义箭头（右侧） */
.alert--collapsible .alert__header::after{
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(135deg);
  transition: transform .2s ease;
  opacity: .9;
}

/* open 时箭头向下 */
.alert--collapsible[open] .alert__header::after{
  transform: translateY(-50%) rotate(45deg);
}

/* hover 背景微变 */
.alert:hover{
  background-color: rgba(0,0,0,var(--alert-hover-alpha));
}

/* ---------- Regular blockquote (callout) ---------- */
.callout{
  margin: 1.25rem 0;
  border-left: 4px solid var(--callout-border);
  border-radius: 8px;
  padding: 1rem 1rem 1rem 1.25rem;
  background-color: rgba(0,0,0,var(--muted-bg-alpha));
  color: var(--muted-fg);
  font-style: italic;
  transition: transform .15s ease, background-color .15s ease;
}
.callout:hover{
  transform: translateX(4px);
  background-color: rgba(0,0,0,var(--muted-hover-alpha));
}
.callout__prose{
  max-width: none;
  font-size: .95rem;
  line-height: 1.6;
  font-style: inherit;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .alert, .callout, .alert--collapsible .alert__header::after{
    transition: none !important;
  }
}