/* ==========================================================================
   技術筆記 — 極簡主題
   單一 CSS 檔、零 JavaScript、零外部字型請求。
   深色模式由 prefers-color-scheme 處理，不需要切換按鈕。
   ========================================================================== */

:root {
  --bg:        #ffffff;
  --bg-soft:   #f6f8fa;
  --bg-code:   #f6f8fa;
  --fg:        #1f2328;
  --fg-muted:  #59636e;
  --border:    #d1d9e0;
  --link:      #0550ae;
  --link-hover:#0a68d8;
  --accent:    #0969da;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
          "PingFang TC", "Microsoft JhengHei", "Hiragino Sans", Roboto,
          Helvetica, Arial, sans-serif;

  --sidebar-w: 17rem;
  --content-w: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0d1117;
    --bg-soft:   #151b23;
    --bg-code:   #151b23;
    --fg:        #d1d7e0;
    --fg-muted:  #9198a1;
    --border:    #2f3742;
    --link:      #64a8ff;
    --link-hover:#8cc2ff;
    --accent:    #4493f8;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

/* --- 無障礙：跳到主要內容 ------------------------------------------------ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- 頁首 ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  padding: .7rem 1.25rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-header .brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.site-header .brand:hover { color: var(--accent); }

.site-header .tagline {
  color: var(--fg-muted);
  font-size: .85rem;
  flex: 1 1 auto;
  min-width: 0;
}

.site-search { display: flex; gap: .35rem; }
.site-search input {
  min-width: 0;
  width: 11rem;
  padding: .3rem .6rem;
  font: inherit;
  font-size: .85rem;
  color: var(--fg);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.site-search button {
  padding: .3rem .7rem;
  font: inherit;
  font-size: .85rem;
  color: var(--fg);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.site-search button:hover { border-color: var(--accent); color: var(--accent); }

/* --- 版面 ---------------------------------------------------------------- */
.layout {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  max-width: calc(var(--sidebar-w) + var(--content-w) + 6rem);
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

/* --- 側邊導覽（原生 <details>，不需要 JS） ------------------------------- */
.sidebar {
  position: sticky;
  top: 4rem;
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  padding: 1.75rem 0;
  font-size: .9rem;
}

.sidebar h2 {
  margin: 0 0 .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.sidebar ul { list-style: none; margin: 0; padding: 0; }

.sidebar details { margin-bottom: .15rem; }

.sidebar summary {
  display: block;
  padding: .3rem .55rem;
  border-radius: 6px;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary::before {
  content: "\25B8";
  display: inline-block;
  width: 1em;
  margin-right: .15rem;
  color: var(--fg-muted);
  transition: transform .15s ease;
}
.sidebar details[open] > summary::before { transform: rotate(90deg); }
.sidebar summary:hover { background: var(--bg-soft); }
.sidebar summary.is-active { font-weight: 600; color: var(--accent); }

.sidebar details ul { padding-left: .9rem; }

.sidebar a {
  display: block;
  padding: .28rem .55rem;
  border-radius: 6px;
  color: var(--fg);
  text-decoration: none;
}
.sidebar a:hover { background: var(--bg-soft); color: var(--accent); }

.sidebar a[aria-current="page"] {
  background: var(--bg-soft);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}

/* 依目錄深度縮排（由 layout 自動計算 d1 / d2 / d3 …） */
.sidebar li.d2 > a { padding-left: 1.5rem; }
.sidebar li.d3 > a { padding-left: 2.4rem; }
.sidebar li.d4 > a { padding-left: 3.3rem; }
.sidebar li.d5 > a { padding-left: 4.2rem; }
.sidebar li.d2 > a,
.sidebar li.d3 > a,
.sidebar li.d4 > a,
.sidebar li.d5 > a { font-size: .95em; color: var(--fg-muted); }
.sidebar li.d2 > a:hover,
.sidebar li.d3 > a:hover,
.sidebar li.d4 > a:hover,
.sidebar li.d5 > a:hover { color: var(--accent); }
.sidebar li.d2 > a[aria-current="page"],
.sidebar li.d3 > a[aria-current="page"],
.sidebar li.d4 > a[aria-current="page"],
.sidebar li.d5 > a[aria-current="page"] { color: var(--accent); }

/* --- 主內容 -------------------------------------------------------------- */
.content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--content-w);
  padding: 1.75rem 0 0;
}

.breadcrumb {
  margin-bottom: 1.25rem;
  font-size: .85rem;
  color: var(--fg-muted);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li + li::before { content: "/"; margin-right: .3rem; color: var(--border); }
.breadcrumb a { color: var(--fg-muted); }
.breadcrumb a:hover { color: var(--accent); }

/* --- 排版 ---------------------------------------------------------------- */
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
  margin: 2rem 0 .8rem;
  line-height: 1.3;
  font-weight: 700;
}
.content > h1:first-child { margin-top: .5rem; }

.content h1 { font-size: 1.85rem; letter-spacing: -.01em; }
.content h2 {
  font-size: 1.35rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--border);
}
.content h3 { font-size: 1.12rem; }
.content h4 { font-size: 1rem; }
.content h5, .content h6 { font-size: .93rem; color: var(--fg-muted); }

.content p, .content ul, .content ol, .content dl { margin: 0 0 1rem; }
.content ul, .content ol { padding-left: 1.5rem; }
.content li + li { margin-top: .25rem; }
.content li > ul, .content li > ol { margin: .25rem 0; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

hr {
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background: var(--border);
}

blockquote {
  margin: 0 0 1rem;
  padding: .2rem 0 .2rem 1rem;
  border-left: 3px solid var(--border);
  color: var(--fg-muted);
}
blockquote > :last-child { margin-bottom: 0; }

/* --- 程式碼 -------------------------------------------------------------- */
code, kbd, samp, pre {
  font-family: var(--mono);
  font-size: .875em;
}

:not(pre) > code {
  padding: .15em .4em;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 5px;
  white-space: break-spaces;
}

pre {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  overflow-x: auto;
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: 8px;
  line-height: 1.55;
  tab-size: 4;
}
pre code {
  padding: 0;
  background: none;
  border: 0;
  white-space: pre;
}
div.highlight, figure.highlight { margin: 0 0 1rem; }
div.highlight pre, figure.highlight pre { margin: 0; }

/* --- 表格 ---------------------------------------------------------------- */
.content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 1rem;
  border-collapse: collapse;
  font-size: .92rem;
}
.content th, .content td {
  padding: .45rem .8rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.content th { background: var(--bg-soft); font-weight: 600; }

/* --- 圖片 ---------------------------------------------------------------- */
.content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* --- 附加檔案清單 -------------------------------------------------------- */
.page-files {
  margin: 2.5rem 0 0;
  padding: 1rem 1.15rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .9rem;
}
.page-files h2 {
  margin: 0 0 .6rem;
  padding: 0;
  border: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.page-files ul { list-style: none; margin: 0; padding: 0; }
.page-files li { margin: 0; }
.page-files a { font-family: var(--mono); font-size: .85rem; }

/* --- 頁尾 ---------------------------------------------------------------- */
.page-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--fg-muted);
}

/* --- 窄螢幕：側邊欄變成頁面上方的折疊選單 ------------------------------- */
@media (max-width: 60rem) {
  .layout { display: block; padding-bottom: 3rem; }

  .sidebar {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 1.25rem 0 0;
    border-bottom: 1px solid var(--border);
  }
  .sidebar > ul > li > details > summary { font-weight: 600; }

  .content { max-width: none; padding-top: 1.25rem; }

  .site-header { position: static; }
  .site-header .tagline { display: none; }
  .site-search { flex: 1 1 100%; }
  .site-search input { width: 100%; }
}

@media print {
  .site-header, .sidebar, .breadcrumb, .page-files, .page-footer { display: none; }
  .layout { display: block; }
  a { color: inherit; text-decoration: underline; }
  pre { white-space: pre-wrap; }
}

/* ==========================================================================
   Rouge 語法高亮（建置時產生的 class，前端不執行任何 JS）
   ========================================================================== */
.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs,
.highlight .cd, .highlight .cp { color: #6a737d; font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp,
.highlight .kr, .highlight .kt, .highlight .kc { color: #cf222e; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb,
.highlight .sc, .highlight .sd, .highlight .se, .highlight .sh,
.highlight .si, .highlight .sx, .highlight .sr, .highlight .ss,
.highlight .dl { color: #0a3069; }
.highlight .na, .highlight .nv, .highlight .vi, .highlight .vg,
.highlight .vc { color: #0550ae; }
.highlight .nb, .highlight .bp { color: #6639ba; }
.highlight .nf, .highlight .nc, .highlight .nn { color: #8250df; }
.highlight .nt { color: #116329; }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh,
.highlight .mo, .highlight .il { color: #0550ae; }
.highlight .o, .highlight .ow { color: #0550ae; }
.highlight .gd { color: #82071e; background: #ffebe9; }
.highlight .gi { color: #116329; background: #dafbe1; }
.highlight .gh { color: #0550ae; font-weight: 600; }
.highlight .err, .highlight .gr { color: #82071e; }

@media (prefers-color-scheme: dark) {
  .highlight .c, .highlight .cm, .highlight .c1, .highlight .cs,
  .highlight .cd, .highlight .cp { color: #8b949e; }
  .highlight .k, .highlight .kd, .highlight .kn, .highlight .kp,
  .highlight .kr, .highlight .kt, .highlight .kc { color: #ff7b72; }
  .highlight .s, .highlight .s1, .highlight .s2, .highlight .sb,
  .highlight .sc, .highlight .sd, .highlight .se, .highlight .sh,
  .highlight .si, .highlight .sx, .highlight .sr, .highlight .ss,
  .highlight .dl { color: #a5d6ff; }
  .highlight .na, .highlight .nv, .highlight .vi, .highlight .vg,
  .highlight .vc { color: #79c0ff; }
  .highlight .nb, .highlight .bp { color: #d2a8ff; }
  .highlight .nf, .highlight .nc, .highlight .nn { color: #d2a8ff; }
  .highlight .nt { color: #7ee787; }
  .highlight .m, .highlight .mi, .highlight .mf, .highlight .mh,
  .highlight .mo, .highlight .il { color: #79c0ff; }
  .highlight .o, .highlight .ow { color: #79c0ff; }
  .highlight .gd { color: #ffdcd7; background: #67060c; }
  .highlight .gi { color: #aff5b4; background: #033a16; }
  .highlight .gh { color: #79c0ff; }
  .highlight .err, .highlight .gr { color: #ffa198; }
}