/* ===========================
   EMUDriverTraining — styles
   =========================== */

/* ---- 基本佈景(亮色模式) ---- */
:root, [data-theme="light"]{
  --bg:#ffffff;
  --panel:#f5f5f5;
  --fg:#0e1524;
  --fg-invert:#e7eaf3;
  --muted:#6b778d;
  --muted-invert:#9aa3b2;
  --line:#dfe3ee;
  --line-invert:#2a3142;
  --accent:#7aa2ff;

  --radius:14px;
  --maxw:none;

  /* 統一縮排參數 */
  --indent: 28px;

  /* 折疊樹狀視覺 */
  --gutter: 20px;
  --rail-w: 1.5px;
  --bullet-size: 8px;
  --rail: #dbe1f1;
  --bullet: #6b778d;

  /* 水平 / 垂直微調 */
  --bullet-nudge-x: -2px;
  --bullet-nudge-y: 0px;

  /* 直線端點與圓點的安全距（避免穿出圓點） */
  --rail-cap: -5px;

  /* hover 顏色 */
  --heading-hover:#009AFF;

  /* 只針對第一層級圓點的額外垂直微調（正數=往下） */
  --bullet-nudge-y-l1: 1px;

  /* ===== 動畫 tokens ===== */
  --ease-smooth: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 160ms;     /* opacity/小變化 */
  --dur-med: 200ms;      /* 高度動畫 180–220ms 之間 */
}

/* ---- 暗色模式 ---- */
[data-theme="dark"]{
  --bg:#0b0c0f;
  --panel:#11131a;
  --fg:#e7eaf3;
  --fg-invert:#0e1524;
  --muted:#9aa3b2;
  --muted-invert:#6b778d;
  --line:#262b36;
  --line-invert:#dfe3ee;
  --rail:#2a3142;
  --bullet:#9aa3b2;
  --heading-hover:#009AFF;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --dur-fast: 1ms;
    --dur-med: 1ms;
  }
}

html,body{
  height:100%;
  overflow-x: auto;
  overflow-y: auto;
}
body{
  margin:0;
  color:var(--fg);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans TC",sans-serif;
  background:var(--bg);
}

/* 暗色模式漸層背景 */
[data-theme="dark"] body{
  background:linear-gradient(180deg,var(--bg),#0f131d);
}

/* 允許內容水平延伸 */
.wrap{
  max-width: none;
  margin:0 auto;
  padding:20px 16px 60px;
  overflow-x: auto;
  overflow-y: visible;
}

/* 可依需求隱藏頁首與標題列 */
.hdr{ display:none; }
.titlebar{ display:none; }

/* 卡片容器 */
.card{
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  min-width: min-content;
  width: fit-content;
}
.content{
  padding: 0;
  min-width: min-content;
  width: fit-content;
  overflow: visible;
}

/* Markdown 文字排版（精簡） */
.md-root h1{
  font-size:28px;
  margin:12px 0 14px;
  max-width: 80vw;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.md-root p{
  margin:10px 0;
  max-width: 80vw;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.md-root img{
  max-width: 80vw;
  height:auto;
  display:block;
  margin:10px auto;
  border-radius:8px;
}
pre{
  background:#0001;
  padding:12px;
  border-radius:8px;
  max-width: 80vw;
  overflow-x: auto;
  word-wrap: break-word;
}

/* 取消瀏覽器預設清單縮排，交給 .section 控制縮排 */
.md-root ul, .md-root ol{
  list-style-position: outside;
  padding-left: 0;
  margin-left: 0;
}

/* ===========================
   Roam 風樹狀
   =========================== */

.section{
  position: relative;
  margin-left: var(--indent);
  padding-left: var(--gutter);
  min-width: fit-content;
}
.section[style*="--depth: 0"]{
  margin-left: 0;
}

.section-body{
  position: relative;
  min-width: fit-content;
}

/* 導軌 */
.section-body::before{
  content:"";
  position:absolute;
  left: calc(-1 * var(--gutter) + (var(--gutter) / 2) - (var(--rail-w) / 2) + 4px);
  top: var(--rail-cap);
  bottom: var(--rail-cap);
  width: var(--rail-w);
  background: var(--rail);
  pointer-events: none;
  z-index: 0;
  display: none;
}
.section.expanded.has-children > .section-body::before{
  display: block;
}

/* ===== 導軌脈衝（展開時 600ms 一次） ===== */
@keyframes railPulse {
  0% { opacity: .0; }
  30% { opacity: .7; }
  100% { opacity: .3; }
}
.section-body.pulse::before{
  animation: railPulse 600ms var(--ease-smooth) 1;
}

/* 標題列（圓點與文字） */
.section > [role="heading"]{
  position: relative;
  z-index: 1;
  transition: color .15s ease;
  max-width: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  min-width: fit-content;

  /* 關鍵：讓圓點以「第一行」為基準 */
  align-items: flex-start;
}

/* 🔕 圖片標題的圓點「隱藏但保留位置」 */
.section.image-heading > [role="heading"]::before{
  visibility: hidden; /* 只隱藏，不移除佈局空間 */
}

/* 額外保險（支援 :has 的瀏覽器）—— 若標題只有一張圖片也隱藏圓點 */
.section > [role="heading"]:has(> img:only-child)::before,
.section > [role="heading"]:has(> p:only-child > img:only-child)::before{
  visibility: hidden;
}

/* 只修正「第一層級」圓點的垂直置中微調（不影響其他層級） */
.section[style*="--depth: 0"] > [role="heading"]::before{
  margin-top: calc(
    (var(--h-sub-line-height) * 1em - var(--bullet-size)) / 2
    + var(--bullet-nudge-y-l1, 1px)
  );
}

/* hover 效果 */
.section.has-children > [role="heading"]:hover,
.section.has-children > [role="heading"]:focus-visible{
  color: var(--heading-hover);
  outline: none;
}

/* ===== 標題「高亮消退」：新展開節點 800ms 柔光 ===== */
.section.just-opened > [role="heading"]{
  position: relative;
}
.section.just-opened > [role="heading"]::after{
  content:"";
  position:absolute; inset:-2px -6px;
  background: currentColor;
  opacity:.08; border-radius:8px; pointer-events:none;
  animation: headGlow 800ms var(--ease-smooth) 1 forwards;
}
@keyframes headGlow{
  from{ opacity:.10; } to{ opacity:0; }
}

/* ===== 展開/收合：絲滑高度 + 淡入 ===== */
.section-body.animating{
  overflow: hidden;
  will-change: height, opacity;
  transition:
    height var(--dur-med) var(--ease-smooth),
    opacity var(--dur-fast) linear;
}
.section.expanded > .section-body{ opacity: 1; }
.section:not(.expanded) > .section-body{ opacity: .0; }

/* 收合狀態（動畫結束後才加上） */
.section-body.collapsed{ display:none; }

/* 內容區塊上下距 */
.section-body > *{ margin-block: .35rem .35rem; }

/* 內文圖片與段落寬度限制 */
.section-body img{
  margin-left: .25rem;
  max-width: 80vw;
}
.section-body p,
.section-body > *:not(.section):not(ul):not(ol) {
  max-width: 80vw;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

/* 內部 ul/ol */
.section-body ul, .section-body ol{
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}

/* 可能殘留的原生 li */
.section-body li{
  margin-left: var(--indent);
  word-wrap: break-word;
}

/* ===== 純圖片標題：影子收合（展開時極淡升起） ===== */
.section.image-heading > [role="heading"] img{
  transition: filter var(--dur-med) var(--ease-smooth),
              transform var(--dur-med) var(--ease-smooth);
  filter: none;
  transform: translateY(0);
}
.section.image-heading.expanded > [role="heading"] img{
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.18));
  transform: translateY(-2px);
}

/* 連結風格 */
.md-root a{
  color:var(--accent);
  text-decoration:none;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.md-root a:hover{ text-decoration:underline; }

/* 捲軸美化(亮色模式) */
:root::-webkit-scrollbar,
[data-theme="light"]::-webkit-scrollbar { width: 10px; height: 10px; }
:root::-webkit-scrollbar-track,
[data-theme="light"]::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
:root::-webkit-scrollbar-thumb,
[data-theme="light"]::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 5px; }
:root::-webkit-scrollbar-thumb:hover,
[data-theme="light"]::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }

/* 捲軸美化(暗色模式) */
[data-theme="dark"]::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"]::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
[data-theme="dark"]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 5px; }
[data-theme="dark"]::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }