/* gitgraph（工程師看的分支圖）— 第四輪。class 一律 .w-gitgraph 前綴；尺寸用 em（講師模式放大字級時一起放大）。
 * 版型 class 由 JS 依元件寬（em）切換：-wide／-narrow（< 34em）、-side（log 放右邊）、-cmp-side（compare 並排）。
 * 每張圖的方向在畫布上：.w-gitgraph-canvas.is-h（時間由左到右）／.is-v（由上到下、最新在上）。 */
.w-gitgraph { position: relative; display: grid; gap: .7em; min-width: 0; max-width: 100%; }
.w-gitgraph > * { min-width: 0; }

/* 分支色票（base.css）：線、圓點、標籤共用 */
.w-gitgraph .c-green { --gg-c: var(--c-primary); --gg-soft: var(--c-primary-soft); --gg-dark: var(--c-primary-dark); }
.w-gitgraph .c-purple { --gg-c: var(--c-purple); --gg-soft: var(--c-purple-soft); --gg-dark: var(--c-purple-dark); }
.w-gitgraph .c-orange { --gg-c: var(--c-orange); --gg-soft: var(--c-orange-soft); --gg-dark: var(--c-orange-dark); }
.w-gitgraph .c-blue { --gg-c: var(--c-blue); --gg-soft: var(--c-blue-soft); --gg-dark: var(--c-blue-dark); }
.w-gitgraph .c-red { --gg-c: var(--c-red); --gg-soft: var(--c-red-soft); --gg-dark: var(--c-red-dark); }
.w-gitgraph .c-gold { --gg-c: var(--c-gold-dark); --gg-soft: var(--c-gold-soft); --gg-dark: #8a6200; }

.w-gitgraph-title { margin: 0; font-size: 1.05em; font-weight: 800; line-height: 1.4; }
.w-gitgraph-hint { margin: -.3em 0 0; color: var(--c-muted); font-size: .88em; }

.w-gitgraph-body { display: grid; gap: .75em; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.w-gitgraph-side .w-gitgraph-body { grid-template-columns: minmax(0, max-content) minmax(19em, 1fr); align-items: start; }

/* ---------- 圖的外框 ---------- */
.w-gitgraph-panel {
  position: relative; min-width: 0;
  background: var(--c-surface); border: .125em solid var(--c-line); border-radius: var(--radius);
  padding: .45em .6em .6em;
}
.w-gitgraph-panelhead { display: flex; align-items: center; justify-content: space-between; gap: .5em; min-height: 1.6em; }
.w-gitgraph-sample {
  flex: none; margin-left: auto; font-size: .72em; font-weight: 800; letter-spacing: .05em;
  padding: .05em .65em; border-radius: 999px; background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-line);
}
.w-gitgraph-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .15em 1em; font-size: .78em; color: var(--c-muted); font-weight: 700; }
.w-gitgraph-legend span { display: inline-flex; align-items: center; gap: .35em; }
.w-gitgraph-lgdot, .w-gitgraph-lgring { display: inline-block; width: .9em; height: .9em; border-radius: 50%; background: var(--c-primary); }
.w-gitgraph-lgring { background: radial-gradient(circle, var(--c-primary) 0 30%, var(--c-surface) 32% 52%, var(--c-primary) 54%); }
.w-gitgraph-lghead { color: var(--c-primary-dark); }

.w-gitgraph-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.w-gitgraph-canvas { position: relative; }
.w-gitgraph-canvas.is-v { width: 100%; }
.w-gitgraph-empty { margin: .6em 0; color: var(--c-muted); }

/* 圖層：按鈕（底，含選取底色）→ SVG 線與圓點（不吃點擊）→ 浮動標籤 */
.w-gitgraph-svg { position: absolute; left: 0; top: 0; overflow: visible; max-width: none; pointer-events: none; z-index: 3; }
.w-gitgraph-edge { fill: none; stroke: var(--gg-c); stroke-width: .22; stroke-linecap: round; stroke-linejoin: round; }
.w-gitgraph-dot { fill: var(--gg-c); stroke: var(--c-surface); stroke-width: .14; }
.w-gitgraph-ring { fill: var(--c-surface); stroke: var(--gg-c); stroke-width: .2; }
.w-gitgraph-core { fill: var(--gg-c); }
.w-gitgraph-halo { fill: none; stroke: var(--gg-c); stroke-width: .13; opacity: .45; }
.w-gitgraph-flash { fill: var(--gg-c); opacity: 0; }

/* 新出現的 commit：線畫出來、圓點彈出、外圈閃一下 */
.w-gitgraph-edge.is-new { stroke-dasharray: 1; animation: w-gitgraph-draw .55s var(--ease) both; }
.w-gitgraph-node.is-new circle { transform-box: fill-box; transform-origin: center; animation: w-gitgraph-pop .5s var(--ease) .15s both; }
.w-gitgraph-node.is-new .w-gitgraph-flash { animation: w-gitgraph-flash 1.3s ease-out .2s both; }
.w-gitgraph-refs-float.is-new { animation: w-gitgraph-in .4s var(--ease) .25s both; }
.w-gitgraph-canvas.is-v .w-gitgraph-commit.is-new { animation: w-gitgraph-rowin 1.4s var(--ease) both; }
@keyframes w-gitgraph-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes w-gitgraph-pop { 0% { transform: scale(.4); opacity: .2; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes w-gitgraph-flash { 0% { opacity: .55; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes w-gitgraph-in { from { opacity: 0; transform: translateY(-100%) translateY(.4em); } to { opacity: 1; transform: translateY(-100%); } }
@keyframes w-gitgraph-rowin { 0% { background: rgba(255, 197, 61, .45); } 100% { background: transparent; } }
@keyframes w-gitgraph-cardin { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }

/* ---------- 可點的 commit ---------- */
.w-gitgraph-commit {
  position: absolute; z-index: 2; appearance: none; margin: 0; padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.w-gitgraph-commit:focus-visible { outline: .18em solid var(--c-blue); outline-offset: .06em; }
/* 寬版：蓋在圓點上的圓形按鈕 */
.w-gitgraph-canvas.is-h .w-gitgraph-commit { width: 1.9em; height: 1.9em; margin: -.95em 0 0 -.95em; border-radius: 50%; }
.w-gitgraph-canvas.is-h .w-gitgraph-commit:hover { background: rgba(31, 157, 224, .14); }
.w-gitgraph-canvas.is-h .w-gitgraph-commit.is-selected { box-shadow: 0 0 0 .17em var(--c-blue); background: rgba(31, 157, 224, .12); }
/* 窄版：整列（hash＋訊息＋標籤）都可以點 */
.w-gitgraph-canvas.is-v .w-gitgraph-commit {
  left: 0; right: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start;
  padding: .25em .5em 0 calc(var(--gg-lanes, 2em) + .35em); text-align: left; border-radius: .6em; overflow: hidden;
}
.w-gitgraph-canvas.is-v .w-gitgraph-commit:hover { background: rgba(31, 157, 224, .07); }
.w-gitgraph-canvas.is-v .w-gitgraph-commit.is-selected { background: var(--c-blue-soft); box-shadow: inset .2em 0 0 var(--c-blue); }
.w-gitgraph-rowline { display: flex; align-items: center; gap: .5em; width: 100%; min-width: 0; height: 1.9em; }
.w-gitgraph-hash { flex: none; font-family: var(--mono); font-size: .8em; font-weight: 700; color: #8a6200; background: none; border: 0; padding: 0; }
.w-gitgraph-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .93em; }
.w-gitgraph-commit.is-merge .w-gitgraph-msg { color: var(--c-muted); }

/* 標籤：分支（HEAD 的分支實心）、tag、PR */
.w-gitgraph-refs { display: flex; flex-wrap: nowrap; gap: .25em; white-space: nowrap; pointer-events: none; max-width: 100%; }
.w-gitgraph-refs-float { position: absolute; z-index: 4; transform: translateY(-100%); max-width: none; }
.w-gitgraph-canvas.is-v .w-gitgraph-refs { margin-top: .05em; overflow: hidden; }
.w-gitgraph-ref {
  display: inline-flex; align-items: center; flex: none; font-size: .7em; font-weight: 800; line-height: 1.55;
  padding: 0 .5em; border-radius: .5em; border: .12em solid var(--gg-c, var(--c-line-strong));
  background: var(--gg-soft, var(--c-surface-2)); color: var(--gg-dark, var(--c-text));
}
.w-gitgraph-ref.is-head { background: var(--gg-dark); border-color: var(--gg-dark); color: #fff; }
.w-gitgraph-ref.is-tag { border-color: var(--c-gold-dark); background: var(--c-gold-soft); color: #7a5600; }
/* tag 標籤左邊畫一個「吊牌孔」 */
.w-gitgraph-ref.is-tag::before { content: ''; flex: none; width: .45em; height: .45em; margin-right: .3em; border-radius: 50%; border: .14em solid currentColor; }
.w-gitgraph-ref.is-pr { border-color: var(--c-blue); background: var(--c-blue-soft); color: var(--c-blue-dark); }

/* ---------- commit 小卡 ---------- */
.w-gitgraph-card {
  margin-top: .55em; padding: .55em .8em .7em; border-radius: var(--radius-sm);
  border: .125em solid var(--gg-c, var(--c-line)); background: var(--c-surface); box-shadow: 0 .2em 0 var(--c-line);
  animation: w-gitgraph-cardin .25s var(--ease);
}
.w-gitgraph-card[hidden] { display: none; }
.w-gitgraph-card-top { display: flex; align-items: center; gap: .45em; flex-wrap: wrap; }
.w-gitgraph-card-dot { flex: none; width: .95em; height: .95em; border-radius: 50%; background: var(--gg-c); }
.w-gitgraph-card-dot.is-merge { background: radial-gradient(circle, var(--gg-c) 0 30%, var(--c-surface) 32% 52%, var(--gg-c) 54%); }
.w-gitgraph-card-kind { font-size: .82em; font-weight: 800; color: var(--c-muted); }
.w-gitgraph-card-hash { font-family: var(--mono); font-weight: 800; color: #7a5600; background: var(--c-gold-soft); border: 1px solid #f0d58a; }
.w-gitgraph-card-close { margin-left: auto; min-height: 2em; padding: .2em .4em; }
.w-gitgraph-card-msg { margin: .3em 0 .35em; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.w-gitgraph-card-meta { display: flex; flex-wrap: wrap; gap: .15em 1.2em; margin: 0; font-size: .9em; }
.w-gitgraph-card-meta div { display: flex; gap: .4em; min-width: 0; }
.w-gitgraph-card-meta dt { color: var(--c-muted); font-weight: 700; }
.w-gitgraph-card-meta dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.w-gitgraph-card-parents { margin: .3em 0 0; padding-left: 1.3em; font-size: .88em; }
.w-gitgraph-card-parents li { overflow-wrap: anywhere; }
.w-gitgraph-card-pbranch { color: var(--c-muted); }
.w-gitgraph-card-note { margin: .45em 0 0; padding: .45em .7em; border-radius: .6em; background: var(--c-surface-2); font-size: .9em; font-weight: 700; }
.w-gitgraph-card-note.is-merge { background: var(--c-purple-soft); color: var(--c-purple-dark); }

/* ---------- 逐步顯示 ---------- */
.w-gitgraph-steps { display: grid; gap: .5em; }
.w-gitgraph-stepbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.w-gitgraph-progress { margin-left: auto; font-size: .86em; font-weight: 800; color: var(--c-muted); }
.w-gitgraph-all[aria-pressed="true"] { --b-bg: var(--c-blue-soft); --b-border: var(--c-blue); --b-fg: var(--c-blue-dark); }
.w-gitgraph-steptext {
  margin: 0; min-height: 2.9em; padding: .6em .85em; border-radius: var(--radius-sm);
  background: var(--c-blue-soft); border-left: .3em solid var(--c-blue); line-height: 1.6;
}

/* ---------- 終端機：git log --graph ---------- */
.w-gitgraph-log { min-width: 0; border-radius: var(--radius); overflow: hidden; background: var(--c-code-bg); border: .125em solid #151a24; }
.w-gitgraph-logbar { display: flex; align-items: center; gap: .4em; padding: .4em .8em; background: #2b3140; color: #aab2c0; font-size: .75em; font-weight: 700; }
.w-gitgraph-logbar i { display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: #ff5f57; }
.w-gitgraph-logbar i:nth-child(2) { background: #febc2e; }
.w-gitgraph-logbar i:nth-child(3) { background: #28c840; margin-right: .3em; }
.w-gitgraph-logpre {
  margin: 0; padding: .75em .9em; color: var(--c-code-text); font-family: var(--mono); font-size: .8em; line-height: 1.55;
  overflow-x: auto; white-space: pre; tab-size: 4;
  /* 很長的 log（例如 Git Flow 二十幾行）在框內捲動，不要把下面的「下一步」推到畫面外 */
  max-height: 20em; overflow-y: auto;
}
.w-gitgraph-logpre:focus-visible { outline-offset: -.2em; }
.w-gitgraph-logline { display: block; }
.w-gitgraph-logline.is-cmd { color: #8be9a8; }
.w-gitgraph-lg { font-weight: 700; }
.w-gitgraph-lg.is-star { font-weight: 900; }
.w-gitgraph-lg.g0 { color: #5fdb9c; }
.w-gitgraph-lg.g1 { color: #b9a0ff; }
.w-gitgraph-lg.g2 { color: #ffad54; }
.w-gitgraph-lg.g3 { color: #6cc8f2; }
.w-gitgraph-lg.g4 { color: #ff8a8a; }
.w-gitgraph-lg.g5 { color: #ffd479; }
.w-gitgraph-lhash { color: #e5c07b; }
.w-gitgraph-ldeco { color: #e5c07b; }
.w-gitgraph-lhead { color: #56d4dd; font-weight: 800; }
.w-gitgraph-lbranch { color: #8be9a8; font-weight: 800; }
.w-gitgraph-lremote { color: #ff8a8a; font-weight: 800; }
.w-gitgraph-ltag { color: #ffd479; font-weight: 800; }

/* ---------- compare：兩張小圖對照 ---------- */
.w-gitgraph-compare { display: grid; gap: .9em; grid-template-columns: minmax(0, 1fr); }
.w-gitgraph-cmp-side .w-gitgraph-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.w-gitgraph-cmpcol { display: grid; gap: .45em; align-content: start; min-width: 0; }
.w-gitgraph-cmptitle { margin: 0; min-width: 0; font-size: .98em; font-weight: 800; line-height: 1.35; }
.w-gitgraph-cmptext { margin: 0; font-size: .88em; color: var(--c-muted); }

/* ---------- 當成講解頁插圖（api.figure）：整體縮小一點 ---------- */
.w-gitgraph-figure { font-size: .9em; gap: .55em; }
.w-gitgraph-figure .w-gitgraph-title { font-size: .98em; }

@media (prefers-reduced-motion: reduce) {
  .w-gitgraph .is-new, .w-gitgraph .is-new *, .w-gitgraph-card { animation: none !important; }
  .w-gitgraph-edge.is-new { stroke-dasharray: none; }
}