/* =====================================================================
   MandarinSimple Vanguard — blog (2026-09-30)
   ===================================================================== */

/* article layout with sticky TOC */
.vg-article { max-width: 780px; }
.vg-article--toc { max-width: 1120px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.vg-article__main { min-width: 0; max-width: 760px; }
.vg-toc { position: sticky; top: 110px; }
.vg-toc__box { padding: 20px 20px 16px; border-radius: 22px; background: #fff; border: 1px solid var(--vg-line); box-shadow: var(--vg-shadow); }
.vg-toc__box summary { list-style: none; cursor: pointer; font: 700 .72rem/1 var(--vg-body); letter-spacing: .16em; text-transform: uppercase; color: var(--vg-brand); }
.vg-toc__box summary::-webkit-details-marker { display: none; }
.vg-toc ol { counter-reset: toc; list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.vg-toc li { counter-increment: toc; }
.vg-toc a { display: grid; grid-template-columns: 26px 1fr; gap: 4px; padding: 8px 8px; border-radius: 10px; color: var(--vg-muted); font-size: .88rem; line-height: 1.35; text-decoration: none; transition: background .2s, color .2s; }
.vg-toc a::before { content: counter(toc, decimal-leading-zero); font: 700 .72rem/1.6 var(--vg-body); color: var(--vg-gold); }
.vg-toc a:hover, .vg-toc a.is-current { background: #F2EEE7; color: var(--vg-ink); }
body.ms-vg .vg-prose h2[id] { scroll-margin-top: 110px; }

/* TL;DR box (new and legacy posts) */
body.ms-vg .vg-prose .ms-article-tldr {
  position: relative; overflow: hidden; margin: 0 0 36px !important; padding: 26px 28px 24px !important;
  border: 0 !important; border-radius: 24px !important; background: var(--vg-ink) !important; color: var(--vg-on-dark) !important;
}
body.ms-vg .vg-prose .ms-article-tldr::after { content: "要"; position: absolute; right: -10px; bottom: -34px; font: 700 8rem/1 var(--vg-zh); color: transparent; -webkit-text-stroke: 1px rgba(201,168,118,.25); pointer-events: none; }
body.ms-vg .vg-prose .ms-article-tldr p { position: relative; margin: 0 !important; font-size: 1.04rem !important; line-height: 1.7 !important; color: var(--vg-on-dark) !important; }
body.ms-vg .vg-prose .ms-article-tldr p:first-child { margin-bottom: 10px !important; font: 700 .74rem/1 var(--vg-body) !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--vg-gold) !important; }
body.ms-vg .vg-prose .ms-article-tldr strong { color: #fff !important; }
body.ms-vg .vg-prose > .ms-article-tldr + p { font-size: 1.22rem; line-height: 1.75; color: var(--vg-ink); }

/* tables (override legacy inline styles) */
body.ms-vg .vg-prose table { width: 100% !important; display: table; border-collapse: separate !important; border-spacing: 0; overflow: hidden; margin: 8px 0 28px !important; border: 1px solid var(--vg-line) !important; border-radius: 18px; background: #fff; font-size: .95rem; box-shadow: var(--vg-shadow); }
body.ms-vg .vg-prose thead tr { background: var(--vg-ink) !important; }
body.ms-vg .vg-prose th { background: var(--vg-ink) !important; color: #fff !important; border: 0 !important; padding: 13px 16px !important; font: 600 .86rem/1.3 var(--vg-body); text-align: left; }
body.ms-vg .vg-prose td { border: 0 !important; border-top: 1px solid var(--vg-line) !important; padding: 12px 16px !important; color: #2E3342; vertical-align: top; }
body.ms-vg .vg-prose tbody tr:nth-child(even) td { background: #FBF9F5; }
body.ms-vg .vg-prose td:first-child { font-weight: 600; color: var(--vg-ink); }
@media (max-width: 720px) {
  body.ms-vg .vg-prose table { display: block; overflow-x: auto; white-space: normal; }
  body.ms-vg .vg-prose th, body.ms-vg .vg-prose td { min-width: 120px; }
}

/* H3 inside prose */
body.ms-vg .vg-prose h3 { padding-left: 16px; border-left: 3px solid var(--vg-brand); }

/* FAQ accordion */
body.ms-vg .vg-prose details { margin: 0 0 10px; border-radius: 18px; background: #fff; border: 1px solid var(--vg-line); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
body.ms-vg .vg-prose details[open] { border-color: var(--vg-gold); box-shadow: var(--vg-shadow); }
body.ms-vg .vg-prose summary { position: relative; list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font: 700 1.05rem/1.4 var(--vg-display); color: var(--vg-ink); }
body.ms-vg .vg-prose summary::-webkit-details-marker { display: none; }
body.ms-vg .vg-prose summary::after { content: "+"; position: absolute; right: 18px; top: 50%; width: 28px; height: 28px; margin-top: -14px; display: grid; place-items: center; border-radius: 50%; background: var(--vg-gold-soft); color: var(--vg-brand); font: 700 1.1rem/1 var(--vg-body); transition: transform .3s var(--vg-ease), background .25s, color .25s; }
body.ms-vg .vg-prose details[open] summary::after { transform: rotate(45deg); background: var(--vg-brand); color: #fff; }
body.ms-vg .vg-prose details > p { margin: 0 !important; padding: 0 22px 20px; color: var(--vg-muted); font-size: 1rem; line-height: 1.7; }

/* contextual inline CTA */
.vg-inline-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin: 40px 0 44px; padding: 22px 24px; border-radius: 24px; background: var(--vg-gold-soft); border: 1px solid #EADCC2; }
.vg-inline-cta__glyph { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 20px; background: var(--vg-brand); color: #fff; font: 700 2rem/1 var(--vg-zh); box-shadow: 0 14px 30px -14px rgba(227,52,47,.8); }
.vg-inline-cta__copy p { margin: 8px 0 0 !important; font-size: .98rem !important; line-height: 1.55 !important; color: #3F4555 !important; }
.vg-inline-cta .vg-btn { text-decoration: none !important; color: #fff !important; }

/* blog list extras */
.vg-blog-cta { grid-column: 1 / -1; position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; padding: 30px 34px; border-radius: var(--vg-r-xl); background: var(--vg-ink); color: var(--vg-on-dark); }
.vg-blog-cta__glyph { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 22px; background: var(--vg-brand); color: #fff; font: 700 2.4rem/1 var(--vg-zh); transform: rotate(-5deg); }
.vg-blog-cta h3 { margin: 10px 0 0; font-size: 1.6rem; font-weight: 800; color: #fff !important; }
.vg-blog-cta p { margin: 6px 0 0; color: var(--vg-on-dark-muted); line-height: 1.6; }
.vg-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vg-route { position: relative; display: grid; gap: 6px; padding: 28px; border-radius: var(--vg-r-lg); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: var(--vg-on-dark); text-decoration: none; transition: background .3s, transform .45s var(--vg-ease), border-color .3s; }
.vg-route:hover { background: rgba(255,255,255,.08); border-color: var(--vg-gold); transform: translateY(-6px); color: #fff; }
.vg-route b { font: 700 2.6rem/1 var(--vg-zh); color: var(--vg-brand); margin-bottom: 10px; }
.vg-route strong { font: 800 1.35rem/1.2 var(--vg-display); color: #fff; }
.vg-route span { color: var(--vg-on-dark-muted); font-size: .95rem; }
.vg-route i { position: absolute; right: 26px; top: 28px; font-style: normal; color: var(--vg-gold); transition: transform .3s var(--vg-ease); }
.vg-route:hover i { transform: translateX(6px); }
.vg-related .vg-head { margin-bottom: 36px; }
.vg-related .vg-post__title { font-size: 1.15rem; }

@media (max-width: 1080px) {
  .vg-article--toc { grid-template-columns: 1fr; gap: 0; }
  .vg-toc { position: static; margin-bottom: 32px; }
  .vg-toc__box:not([open]) { padding-bottom: 20px; }
  .vg-routes { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .vg-inline-cta, .vg-blog-cta { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
  .vg-inline-cta .vg-btn, .vg-blog-cta .vg-btn { justify-self: start; }
}