/* =========================================================================
   Prompts-MCP web viewer — Quill blue/white edition
   Design pillars (per ui-ux-pro-max guidelines + 用户要求):
     - 蓝白配色：Tailwind blue-600 主色 + slate 中性 = 专业工具感
     - 大气：宽内容卡 (max-width 1200px)、大留白、字号节奏 (H1 30px → body 14px)
     - 微妙层次：1px hairline border + 极轻 shadow (0 1px 2px rgba(15,23,42,.04))
                 而不是 bento 那种纯色块拼贴
     - 信息密度：表格紧凑可扫读，行高 1.6-1.7 给散文呼吸
   ========================================================================= */

:root {
  /* ─── Surfaces ───────────────────────────────────────────────────── */
  --bg-app:        #f8fafc;          /* slate-50 — 页面底，比纯白冷一档 */
  --bg-card:       #ffffff;          /* 卡片纯白 */
  --bg-sunken:     #f1f5f9;          /* slate-100 — 侧栏 + 表头底色 */
  --bg-chip:       #f1f5f9;          /* code / chip 同 sunken，避免色块过多 */
  --bg-hover:      #eff6ff;          /* blue-50 — hover tint */

  /* ─── Text ───────────────────────────────────────────────────────── */
  --fg:            #0f172a;          /* slate-900 主文字 */
  --fg-muted:      #334155;          /* slate-700 次要 */
  --fg-faint:      #64748b;          /* slate-500 三级 */
  --fg-ghost:      #94a3b8;          /* slate-400 占位/辅助 */

  /* ─── Brand: blue ────────────────────────────────────────────────── */
  --accent:        #2563eb;          /* blue-600 — 主色：链接、按钮、激活态 */
  --accent-hover:  #1d4ed8;          /* blue-700 — hover */
  --accent-bright: #3b82f6;          /* blue-500 — 亮 accent / 突出 */
  --accent-deep:   #1e3a8a;          /* blue-900 — 深字 on tint */
  --accent-soft:   #dbeafe;          /* blue-100 — tint 背景 */
  --accent-edge:   #bfdbfe;          /* blue-200 — tint 边框 */

  /* ─── Lines ──────────────────────────────────────────────────────── */
  --border:        #cbd5e1;          /* slate-300 — 主边框 */
  --border-soft:   #e2e8f0;          /* slate-200 — 浅边/分隔 */
  --border-faint:  #f1f5f9;          /* slate-100 — 极浅，仅 table row 用 */

  /* ─── Status hues ────────────────────────────────────────────────── */
  --hue-green:     #047857;
  --hue-green-bg:  #d1fae5;
  --hue-amber:     #b45309;
  --hue-amber-bg:  #fef3c7;
  --hue-rose:      #b91c1c;
  --hue-rose-bg:   #fee2e2;

  /* ─── Radii ──────────────────────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* ─── Shadows ────────────────────────────────────────────────────── */
  /* 极轻 shadow，不刻意深色，只是给 1px 边框补一层 ambient 层次。
     ui-ux-pro-max: 避免硬阴影，保持 flat 基底的同时给卡片"轻盈浮起"感 */
  --shadow-card:   0 1px 2px rgba(15, 23, 42, 0.04),
                   0 1px 3px rgba(15, 23, 42, 0.03);
  --shadow-hover:  0 4px 12px rgba(37, 99, 235, 0.08),
                   0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-focus:  0 0 0 3px rgba(37, 99, 235, 0.15);

  /* ─── Type ───────────────────────────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Menlo", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Page is a fixed shell — sidebar + content scroll independently.
     Without this, the body adds a second scrollbar on top of the
     content's own, producing the "two scrollbars side by side" glitch. */
  overflow: hidden;
}
body {
  font-family: var(--font);
  color: var(--fg);
  background: var(--bg-app);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";   /* Inter ligatures if available */
}
a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }

::selection { background: var(--accent-soft); color: var(--accent-deep); }

code {
  font-family: var(--mono);
  background: var(--bg-chip);
  padding: 0.12em 0.42em;
  border-radius: 4px;
  font-size: 0.88em;
  color: var(--accent-deep);
  border: 1px solid var(--border-soft);
}
/* Code blocks — pure white background, Xcode-style light syntax highlighting.
   Pygments emits inline <span class="k">…</span> tokens directly inside
   the markdown-it-supplied <pre><code> wrapper (no extra .highlight div),
   so token rules below scope under `pre code` to avoid collateral. */
pre {
  background: #ffffff;
  color: #1f1f1f;
  padding: 16px 18px;
  border-radius: var(--r-md);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  margin: 14px 0;
  border: 1px solid var(--border-soft);
}
pre code {
  background: transparent;
  padding: 0;
  border: none;
  color: inherit;
  font-size: inherit;
}
/* Slim scrollbar inside code blocks */
pre::-webkit-scrollbar { height: 8px; }
pre::-webkit-scrollbar-track { background: transparent; }
pre::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 4px; }
pre::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* ─── Pygments token colors — Xcode "Default (Light)" palette ────────
   Reference: Xcode default light theme + Apple Swift Playground.
   Token map per https://pygments.org/docs/tokens/                    */
pre code .c,  pre code .ch, pre code .cm, pre code .cp, pre code .cpf,
pre code .c1, pre code .cs                       { color: #007400; font-style: italic; }  /* Comment */
pre code .k,  pre code .kc, pre code .kd, pre code .kn, pre code .kp,
pre code .kr                                     { color: #aa0d91; font-weight: 600; }    /* Keyword */
pre code .kt                                     { color: #5c2699; font-weight: 600; }    /* Type */
pre code .s,  pre code .sa, pre code .sb, pre code .sc, pre code .dl,
pre code .sd, pre code .s2, pre code .se, pre code .sh, pre code .si,
pre code .sx, pre code .sr, pre code .s1, pre code .ss            { color: #c41a16; }     /* String */
pre code .m,  pre code .mb, pre code .mf, pre code .mh, pre code .mi,
pre code .il, pre code .mo                       { color: #1c00cf; }                      /* Number */
pre code .nb                                     { color: #5c2699; }                      /* Built-in */
pre code .nc                                     { color: #3f6e74; font-weight: 600; }    /* Class name */
pre code .nf, pre code .fm                       { color: #26474a; font-weight: 600; }    /* Function name */
pre code .nd                                     { color: #643820; }                      /* Decorator */
pre code .nn                                     { color: #3f6e74; }                      /* Namespace */
pre code .nv, pre code .vc, pre code .vg, pre code .vi             { color: #1f1f1f; }    /* Variables */
pre code .o,  pre code .ow                       { color: #1f1f1f; }                      /* Operator */
pre code .p                                      { color: #1f1f1f; }                      /* Punctuation */
pre code .w                                      { color: inherit; }                      /* Whitespace */
pre code .ge                                     { font-style: italic; }
pre code .gs                                     { font-weight: 600; }
pre code .gd                                     { background: #ffeef0; color: #b31d28; } /* Diff -- */
pre code .gi                                     { background: #e6ffec; color: #1a7f37; } /* Diff ++ */
pre code .err                                    { color: inherit; background: transparent; } /* no red box on box-drawing chars */

/* ─── Topbar ────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 28px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(180%) blur(4px);
}
.brand {
  font-weight: 800;
  font-size: 17px;
  color: var(--accent-deep);
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand::before {
  content: "";
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  /* 唯一允许的渐变：品牌 mark，2px × 2px 不算"用渐变"违反扁平化 */
}
.topbar .meta {
  color: var(--fg-faint);
  font-size: 12.5px;
  white-space: nowrap;
}
.topbar .search { flex: 1; max-width: 560px; }
.topbar .search input {
  width: 100%;
  padding: 9px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 13.5px;
  background: var(--bg-sunken);
  color: var(--fg);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.topbar .search input::placeholder { color: var(--fg-ghost); }
.topbar .search input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: var(--shadow-focus);
}
.mcp-link {
  color: var(--fg-faint);
  font-size: 12px;
  font-family: var(--mono);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-sunken);
  transition: background .15s, color .15s;
}
.mcp-link:hover { background: var(--accent-soft); color: var(--accent-deep); text-decoration: none; }

/* ─── Layout ────────────────────────────────────────────────────────── */
.layout {
  display: flex;
  height: calc(100vh - 53px);
}
.sidebar {
  width: 304px;
  min-width: 264px;
  overflow-y: auto;
  background: var(--bg-card);
  border-right: 1px solid var(--border-soft);
  padding: 18px 14px 28px 16px;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--fg-ghost); }

/* Centered scrollable column. The content area itself is the only
   vertical scroller in the page body (sidebar has its own). We center
   the inner column via padding-inline rather than max-width + margin auto
   so the scrollbar sits at the right edge of the viewport, not at the
   right edge of a centered narrow column.

   Cap at 1440px on ultra-wide displays (otherwise long descriptions
   become hard to scan), but fill more naturally up to that point. */
.content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 36px max(48px, calc((100% - 1440px) / 2)) 96px;
}
.content::-webkit-scrollbar { width: 10px; }
.content::-webkit-scrollbar-track { background: transparent; }
.content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 5px;
  border: 2px solid var(--bg-app);
}
.content::-webkit-scrollbar-thumb:hover { background: var(--fg-ghost); }

/* ─── Tree ──────────────────────────────────────────────────────────── */
.tree, .tree ul { list-style: none; padding-left: 0; margin: 0; }
.tree ul {
  padding-left: 18px;
  margin: 2px 0 4px 8px;
  border-left: 1px solid var(--border-soft);
}
.tree li { margin: 1px 0; }

.tree .folder-row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--r-sm);
  transition: background .12s;
}
.tree .folder-row:hover { background: var(--bg-hover); }
.tree .folder-toggle {
  flex: 0 0 18px;
  width: 18px; height: 24px;
  padding: 0; margin: 0;
  border: none; background: transparent;
  cursor: pointer;
  color: var(--fg-faint);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, color .15s;
}
.tree .folder-toggle:hover { color: var(--accent); }
.tree .folder.open > .folder-row > .folder-toggle { transform: rotate(90deg); }
.tree .folder-link {
  flex: 1;
  display: block;
  padding: 5px 10px 5px 0;
  border-radius: var(--r-sm);
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  font-size: 13px;
  transition: color .15s;
}
.tree .folder-link:hover { color: var(--accent); text-decoration: none; }
.tree .folder.active > .folder-row {
  background: var(--accent-soft);
}
.tree .folder.active > .folder-row > .folder-link {
  color: var(--accent-deep);
  font-weight: 600;
}
.tree .folder.active > .folder-row > .folder-toggle { color: var(--accent-deep); }

.tree .leaf a {
  display: block;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .15s;
}
.tree .leaf a:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.tree .leaf.active a {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 600;
}

/* ─── Search results (sidebar overlay) ──────────────────────────────── */
#search-results { padding: 10px 4px 16px; margin-bottom: 10px; }
#search-results.hidden { display: none; }
#search-results .sr-title {
  font-size: 11px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  font-weight: 700;
}
#search-results .sr-item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  margin-bottom: 6px;
  text-decoration: none;
  color: var(--fg);
  transition: border-color .15s, background .15s, transform .15s;
}
#search-results .sr-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent-edge);
  text-decoration: none;
}
#search-results .sr-item .name {
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-deep);
}
#search-results .sr-item .dim {
  font-size: 11px;
  color: var(--fg-faint);
  margin-left: 6px;
}
#search-results .sr-item .desc {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 4px;
  line-height: 1.45;
}

/* ─── Placeholder (root landing) ────────────────────────────────────── */
.placeholder {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  padding: 44px 48px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}
.placeholder h1 {
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.placeholder p {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.7;
  margin: 0 0 14px;
}
.placeholder ul {
  padding-left: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.placeholder ul li {
  padding: 12px 16px;
  background: var(--bg-sunken);
  border-radius: var(--r-md);
  font-size: 13.5px;
  transition: background .15s, transform .15s;
}
.placeholder ul li:hover { background: var(--accent-soft); }
.placeholder ul li a { font-weight: 600; }
.placeholder .dim { color: var(--fg-faint); font-size: 12.5px; }

/* =========================================================================
   Skill page cards
   ========================================================================= */

.skill {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ─── Header card ─────────────────────────────────────────────────── */
.skill-head {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  padding: 32px 40px 36px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
/* 顶端蓝色 accent 条 — 取代之前的橘色，给页面"卷首"感 */
.skill-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
}
.skill-head .crumbs {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11.5px;
  color: var(--fg-faint);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.skill-head .dim-pill {
  background: var(--accent-soft);
  color: var(--accent-deep);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.skill-head .path {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-faint);
  padding: 3px 10px;
  background: var(--bg-sunken);
  border-radius: 6px;
}
.skill-head .effort {
  font-family: var(--mono);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.effort-low    { color: var(--hue-green); background: var(--hue-green-bg); }
.effort-medium { color: var(--hue-amber); background: var(--hue-amber-bg); }
.effort-high   { color: var(--hue-rose);  background: var(--hue-rose-bg);  }

.skill-head h1 {
  font-size: 32px;
  font-weight: 800;
  margin: 6px 0 12px;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--fg);
}
.skill-head .desc {
  color: var(--fg-muted);
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  /* CJK 字符约等于两个 ASCII 字符宽度，所以 ui-ux 的 65-75ch 上限
     对中文不直接适用。给到 90ch（≈ 1080px）让宽屏不浪费横向空间，
     同时仍避免一行过宽难扫读。 */
  max-width: 90ch;
}
.kw-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.kw {
  font-size: 11.5px;
  background: var(--bg-sunken);
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--fg-muted);
  font-weight: 500;
  border: 1px solid var(--border-soft);
  transition: background .15s, border-color .15s;
}
.kw:hover {
  background: var(--accent-soft);
  border-color: var(--accent-edge);
  color: var(--accent-deep);
}
.fm-details {
  margin-top: 16px;
  font-size: 12px;
  color: var(--fg-faint);
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}
.fm-details summary {
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  padding: 4px 0;
  color: var(--fg-muted);
  transition: color .15s;
}
.fm-details summary:hover { color: var(--accent); }
.fm-details .paths {
  padding-left: 18px;
  margin: 8px 0 0;
  list-style: none;
}
.fm-details .paths li { padding: 3px 0; }
.fm-details .paths code { font-size: 11.5px; }

/* ─── Children-card ──────────────────────────────────────────────── */
.children-card {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  padding: 26px 32px 30px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
}
.children-title {
  font-size: 11.5px;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--fg-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.children-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}
.children-table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  text-transform: uppercase;
  padding: 6px 14px 12px;
  border-bottom: 1.5px solid var(--border);
}
.children-table tbody td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--border-faint);
  vertical-align: top;
}
.children-table tbody tr:last-child td { border-bottom: none; }
.children-table tbody tr {
  transition: background .12s;
}
.children-table tbody tr:hover { background: var(--bg-hover); }

.children-table .col-name { width: 30%; min-width: 220px; white-space: nowrap; }
.children-table .col-blurb { color: var(--fg-muted); line-height: 1.6; }

.child-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
}
.child-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.child-tag {
  margin-left: 8px;
  font-size: 10px;
  font-family: var(--mono);
  background: var(--bg-sunken);
  color: var(--fg-faint);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: lowercase;
  vertical-align: middle;
  font-weight: 500;
  border: 1px solid var(--border-soft);
}
.child-badge-missing {
  margin-left: 8px;
  font-size: 10px;
  color: var(--hue-rose);
  background: var(--hue-rose-bg);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.children-table tbody tr.child-missing .child-link { color: var(--hue-rose); }

/* ─── Markdown body ───────────────────────────────────────────────── */
.markdown-body {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  padding: 36px 44px 40px;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  font-size: 14.5px;
  line-height: 1.75;       /* 散文舒展 — ui-ux: line-height 1.5-1.75 */
}
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg);
}
.markdown-body h2 {
  font-size: 19px;
  font-weight: 700;
  margin: 36px 0 14px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.markdown-body h3 {
  font-size: 15.5px;
  font-weight: 600;
  margin: 26px 0 10px;
  color: var(--fg);
}
.markdown-body p { margin: 0 0 14px; color: var(--fg-muted); }
.markdown-body strong { color: var(--fg); font-weight: 600; }
.markdown-body ul, .markdown-body ol {
  padding-left: 28px;
  margin: 10px 0 16px;
  color: var(--fg-muted);
}
.markdown-body li { margin: 4px 0; }
.markdown-body li::marker { color: var(--accent); }
.markdown-body a {
  color: var(--accent);
  font-weight: 500;
  border-bottom: 1px dashed var(--accent-edge);
}
.markdown-body a:hover {
  color: var(--accent-hover);
  border-bottom-style: solid;
  text-decoration: none;
}
.markdown-body table {
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0 22px;
  width: 100%;
  font-size: 13.5px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.markdown-body table th,
.markdown-body table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-faint);
  text-align: left;
  vertical-align: top;
}
.markdown-body table tr:last-child th,
.markdown-body table tr:last-child td { border-bottom: none; }
.markdown-body table th {
  background: var(--bg-sunken);
  font-weight: 700;
  font-size: 12px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.markdown-body table tr:hover td { background: var(--bg-hover); }
.markdown-body blockquote {
  border-left: 3px solid var(--accent);
  background: var(--bg-hover);
  padding: 14px 20px;
  color: var(--fg-muted);
  margin: 18px 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: normal;
}
.markdown-body blockquote p:last-child { margin-bottom: 0; }
.markdown-body img {
  max-width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
}
.markdown-body hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: 32px 0;
}

/* Inline `code` inside prose — distinct from regular text but NOT inside
   pre blocks (otherwise it stamps a blue tint behind every Pygments token). */
.markdown-body :not(pre) > code {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border: none;
}
/* Reset code descendants of pre back to transparent — Pygments tokens own
   their colors there. */
.markdown-body pre code,
.markdown-body pre code * {
  background: transparent;
}

/* ─── Skill foot ──────────────────────────────────────────────────── */
.skill-foot {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  padding: 16px 28px;
  border: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  color: var(--fg-faint);
  font-size: 12px;
  align-items: center;
}
.skill-foot code {
  background: transparent;
  padding: 0;
  border: none;
  color: var(--fg-muted);
  font-size: 11.5px;
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .content { padding: 28px 32px 80px; }
  .skill-head { padding: 26px 30px 30px; }
  .markdown-body { padding: 28px 32px; }
  .children-card { padding: 22px 24px 26px; }
}

@media (max-width: 768px) {
  .layout { flex-direction: column; height: auto; }
  .sidebar {
    width: 100%;
    min-width: 0;
    max-height: 280px;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
  .content { padding: 22px 18px 60px; }
  .skill-head h1 { font-size: 26px; }
  .skill-head { padding: 22px 22px 24px; }
  .markdown-body { padding: 22px 22px; }
  .topbar { padding: 12px 18px; gap: 14px; }
  .topbar .meta { display: none; }
}

/* ─── A11y: prefers-reduced-motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .tree .folder-toggle { transition: none; }
}

/* ─── A11y: focus rings ───────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.topbar .search input:focus-visible { outline: none; }   /* already box-shadowed */