/* Normal article and page layout shared by chapters and static in-site pages. */
html[data-view-layout="article"] {height:auto;min-height:100%;scrollbar-width:thin;scrollbar-color:var(--archive-metal) var(--bg)}
body[data-view-layout="article"] {height:auto;min-height:100vh}
html[data-view-layout="article"]::-webkit-scrollbar {display:block;width:9px}
html[data-view-layout="article"]::-webkit-scrollbar-track {background:var(--bg)}
html[data-view-layout="article"]::-webkit-scrollbar-thumb {background:var(--archive-metal);border:2px solid var(--bg);border-radius:8px}
body[data-view-layout="article"] {overflow-x:hidden}
body[data-view-layout="article"] .app {display:block;height:auto;min-height:100vh;overflow:visible}
body[data-view-layout="article"] #content {display:block;height:auto;min-height:calc(100vh - 52px);margin-top:52px;overflow:visible;background:transparent}
body[data-view-layout="article"] .reader-view {display:block;width:100%;height:auto;min-height:calc(100vh - 52px);max-width:none;overflow:visible;margin:0;padding:0 0 90px;background:transparent}
body[data-view-layout="article"] .reader-view .main-content {
  display:grid;grid-template-columns:minmax(0,1fr) 210px;align-items:start;gap:0 32px;
  width:min(100%,1200px);height:auto;min-height:0;max-width:1200px;margin:0 auto;padding:30px 32px 70px
}
body[data-view-layout="article"] .reader-view .main-content.article-no-outline {grid-template-columns:minmax(0,900px);justify-content:center}
.article-column {grid-column:1;min-width:0}
.article-header {padding:8px 0 20px}
.article-breadcrumb {display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 28px;color:var(--text-secondary);font-size:11px}
.article-breadcrumb button,.article-breadcrumb span {border:0;background:none;color:inherit;font:inherit;line-height:1.8}
.article-breadcrumb button {cursor:pointer}
.article-breadcrumb button:hover {color:var(--accent)}
.article-breadcrumb button+button::before,.article-breadcrumb button+span::before {content:"/";margin-right:7px;color:var(--border-light)}
.article-breadcrumb .current {color:var(--accent)}
.article-kicker {margin:0 0 10px;color:var(--accent);font:600 10px/1.6 'Rajdhani',sans-serif;letter-spacing:.19em;text-transform:uppercase}
body[data-view-layout="article"] #chapterTitle {display:block;margin:0;padding:0;border:0;color:var(--text-primary);font:500 clamp(30px,3.8vw,44px)/1.35 'Songti SC','Noto Serif SC','SimSun',serif;letter-spacing:.055em;text-align:left;opacity:1}
.article-meta {display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:18px;padding-bottom:17px;border-bottom:1px solid var(--border-light);color:var(--text-secondary);font-size:11px;letter-spacing:.03em}
.page-container-single.article-body {display:block;width:100%;min-height:0;height:auto;flex:initial;overflow:visible;padding:0}
body[data-view-layout="article"] .page-single {
  display:block;width:100%;max-width:none;min-height:0;height:auto;margin:0;padding:clamp(25px,4vw,48px) clamp(23px,5vw,58px);
  border:1px solid var(--border-light);border-top:3px solid var(--archive-metal);border-radius:3px;background:var(--card-bg);
  box-shadow:var(--archive-shadow);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--text-primary);font-size:1rem;line-height:1.95;overflow-wrap:anywhere
}
body[data-view-layout="article"] .page-single :is(h1,h2,h3,h4) {color:var(--text-primary);font-family:'Songti SC','Noto Serif SC','SimSun',serif;line-height:1.65;text-align:left;text-shadow:none;scroll-margin-top:78px;letter-spacing:.04em}
body[data-view-layout="article"] .page-single h1 {font-size:1.8em;border:0;padding:0;margin:0 0 1.2em}
body[data-view-layout="article"] .page-single h2 {font-size:1.4em;margin:2.1em 0 .9em;padding:0 0 0 14px;border-left:2px solid var(--archive-metal);letter-spacing:.06em}
body[data-view-layout="article"] .page-single h3 {font-size:1.15em;margin:1.65em 0 .7em}
body[data-view-layout="article"] .page-single p {margin:0 0 1.2em;color:var(--text-primary);font-size:inherit;line-height:1.95;text-indent:0}
body[data-view-layout="article"] .page-single :is(ul,ol) {margin:1em 0 1.3em;padding-left:1.5em}
body[data-view-layout="article"] .page-single li {margin:.35em 0;line-height:1.85}
body[data-view-layout="article"] .page-single blockquote {margin:1.5em 0;padding:.85em 1.2em;border-left:2px solid var(--accent);border-radius:0;background:var(--archive-tint);color:var(--text-secondary)}
body[data-view-layout="article"] .page-single hr {height:1px;margin:2em 0;border:0;background:var(--border-light)}
body[data-view-layout="article"] .page-single hr::before {content:none}
body[data-view-layout="article"] .page-single img {display:block;max-width:100%;height:auto;margin:1.5em auto}
body[data-view-layout="article"] .page-single table {display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.article-outline {position:sticky;top:76px;grid-column:2;grid-row:1;max-height:calc(100vh - 102px);overflow:auto;padding:18px 16px 20px;border-left:1px solid var(--border-light);color:var(--text-primary);scrollbar-width:thin;scrollbar-color:var(--archive-metal) transparent}
.article-outline-kicker {display:block;margin-bottom:7px;color:var(--text-secondary);font:9px/1.6 'Rajdhani',sans-serif;letter-spacing:.2em}
.article-outline h2 {margin:0 0 13px;font:500 15px/1.6 'Songti SC','Noto Serif SC','SimSun',serif}
#articleOutlineContent {display:grid;gap:5px}
#articleOutlineContent a {display:block;padding:5px 8px;border-left:1px solid transparent;color:var(--text-secondary);font-size:11px;line-height:1.65;text-decoration:none;overflow-wrap:anywhere}
#articleOutlineContent a:hover {border-left-color:var(--accent);color:var(--text-primary);background:var(--archive-tint)}
#articleOutlineContent .toc-h1 {font-weight:600}
#articleOutlineContent .toc-h3,#articleOutlineContent .toc-h4 {padding-left:17px;font-size:10px}
#articleOutlineContent .toc-empty {color:var(--text-secondary);font-size:11px}
.chapter-nav.article-navigation {grid-column:1;display:flex;align-items:stretch;justify-content:space-between;gap:20px;max-width:none;width:100%;margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--border-light);background:transparent}
.article-back,.article-nav-link {border:1px solid var(--border-light);border-radius:3px;background:var(--card-bg);color:var(--text-primary);box-shadow:none;font:inherit;cursor:pointer}
.article-back {align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;font-size:11px}
.article-back .ui-icon {width:14px;height:14px}
.article-sequence {display:flex;justify-content:flex-end;gap:10px;min-width:0}
.article-nav-link {display:grid;gap:5px;min-width:min(190px,25vw);max-width:260px;padding:10px 13px;text-align:start}
.article-nav-link span {color:var(--text-secondary);font-size:10px}
.article-nav-link strong {font-size:11px;font-weight:500;line-height:1.55}
.article-nav-link:disabled {opacity:.38;cursor:default}
.article-nav-link:hover:not(:disabled),.article-back:hover {border-color:var(--accent)}
#articleSequence[hidden],#articleOutline[hidden] {display:none!important}
body[data-view-layout="article"] .fab-container {position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
@media(max-width:1080px) {
  body[data-view-layout="article"] .reader-view .main-content {display:block;width:min(100%,850px);padding:23px 24px 110px}
  .article-outline {display:none}
  .chapter-nav.article-navigation {flex-direction:column}
  .article-sequence {width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-nav-link {min-width:0;max-width:none}
}
@media(max-width:520px) {
  body[data-view-layout="article"] #content {margin-top:46px}
  body[data-view-layout="article"] .reader-view {min-height:calc(100vh - 46px)}
  body[data-view-layout="article"] .reader-view .main-content {padding:20px 14px 105px}
  .article-header {padding-top:4px}
  .article-breadcrumb {margin-bottom:20px;font-size:10px}
  body[data-view-layout="article"] #chapterTitle {font-size:29px;line-height:1.42}
  .article-meta {margin-top:14px;padding-bottom:13px}
  body[data-view-layout="article"] .page-single {padding:22px 19px 34px;font-size:16px;line-height:1.9}
  .article-sequence {gap:7px}
  .article-nav-link {padding:9px 10px}
  body[data-view-layout="article"] .fab-container {right:max(12px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
}

/* Mobile article pages use natural document scrolling and their own compact navigation. */
@media(max-width:700px) {
  body[data-view-layout="article"] #content{margin-top:52px!important}
  body[data-view-layout="article"] .reader-view{
    display:block!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important
  }
  body[data-view-layout="article"] .reader-view .main-content{
    display:block!important;position:relative!important;width:100%!important;max-width:850px!important;
    height:auto!important;min-height:0!important;max-height:none!important;
    margin:0 auto!important;padding:14px 14px 210px!important;overflow:visible!important
  }
  body[data-view-layout="article"] .reader-view .article-header{padding-top:8px!important}
  body[data-view-layout="article"] .reader-view .article-breadcrumb{
    margin:0 0 18px!important;font-size:10px!important;line-height:1.75!important;
    white-space:normal!important;overflow-wrap:anywhere!important
  }
  body[data-view-layout="article"] .reader-view #chapterTitle{font-size:27px!important;line-height:1.42!important}
  body[data-view-layout="article"] .reader-view .article-meta{margin-top:12px!important;padding-bottom:14px!important}
  body[data-view-layout="article"] .page-container-single.article-body{
    display:block!important;flex:initial!important;width:100%!important;height:auto!important;
    min-height:0!important;max-height:none!important;overflow:visible!important;
    overflow-y:visible!important;overflow-x:visible!important;-webkit-overflow-scrolling:auto!important
  }
  body[data-view-layout="article"] .reader-view .page-single{
    width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;
    height:auto!important;margin:0!important;padding:22px 19px 34px!important;
    font-size:16px!important;line-height:1.9!important;word-break:normal!important;overflow-wrap:break-word!important
  }
  body[data-view-layout="article"] .reader-view .page-single p{
    font-size:inherit!important;line-height:1.9!important;margin-bottom:1.02em!important
  }
  body[data-view-layout="article"] .reader-view .chapter-nav.article-navigation{
    display:flex!important;position:relative!important;bottom:auto!important;flex:initial!important;
    flex-direction:column!important;grid-template-columns:none!important;align-items:stretch!important;
    gap:12px!important;width:100%!important;max-width:100%!important;min-width:0!important;
    min-height:0!important;margin:24px 0 0!important;padding:18px 0 16px!important;
    border:0!important;border-top:1px solid var(--border-light)!important;
    background:transparent!important;box-shadow:none!important;z-index:auto!important
  }
  body[data-view-layout="article"] .reader-view .chapter-nav.article-navigation .article-back{
    display:inline-flex!important;align-self:flex-start!important;flex:none!important;
    grid-column:auto!important;grid-row:auto!important;width:max-content!important;max-width:100%!important;
    min-width:0!important;white-space:nowrap!important;word-break:keep-all!important;
    padding:10px 14px!important;font-size:13px!important
  }
  body[data-view-layout="article"] .reader-view .chapter-nav.article-navigation .article-sequence{
    display:grid!important;position:static!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;min-width:0!important;gap:8px!important;padding-inline-end:50px!important
  }
  body[data-view-layout="article"] .reader-view .chapter-nav.article-navigation .article-nav-link{
    display:grid!important;grid-column:auto!important;grid-row:auto!important;
    width:100%!important;min-width:0!important;max-width:none!important;
    white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important;
    align-self:stretch!important;padding:10px!important;font-size:12px!important;text-align:start!important
  }
  body[data-view-layout="article"]:has(.reader-view[style*="block"]) .fab-container{
    position:fixed!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;
    top:auto!important;right:max(12px,env(safe-area-inset-right))!important;
    bottom:max(14px,env(safe-area-inset-bottom))!important;left:auto!important;
    gap:0!important;z-index:300!important
  }
  body[data-view-layout="article"] .fab-container .fab-row{
    position:static!important;display:flex!important;flex-direction:column!important;
    align-items:flex-end!important;gap:8px!important;transform:none!important
  }
  body[data-view-layout="article"] .fab-container .fab{
    position:static!important;inset:auto!important;transform:none!important;
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
    border:1px solid var(--border-light)!important;border-radius:50%!important;
    color:var(--text-primary)!important;background:var(--card-bg)!important;
    box-shadow:var(--archive-shadow,0 3px 12px #0002)!important
  }
}
@media(max-width:360px){
  body[data-view-layout="article"] .reader-view .chapter-nav.article-navigation .article-sequence{
    grid-template-columns:minmax(0,1fr)!important;padding-inline-end:46px!important
  }
}
