/* Article styles - plain CSS (no Tailwind @apply) */

/* Reading Progress */
.reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: #e5e7eb; z-index: 50; }
.tw-dark .reading-progress { background: #374151; }
.reading-progress-bar { height: 100%; background: linear-gradient(90deg, #fb923c, #f97316); transition: width .3s ease; width: 0%; }

/* Typography */
.article-content { padding: 0px 24px; max-width: 100%; margin: 0 auto; }
.article-body { line-height: 1.5; font-size: 16px; max-width: 100%; margin: 0 auto; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { color: var(--primary-text-color); font-weight: 700; line-height: 1.2; margin-bottom: 24px; }
.article-body h2 { font-size: 30px; margin-top: 64px; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--hr-color); }
.article-body h3 { font-size: 24px; margin-top: 48px; }
.article-body h4 { font-size: 20px; margin-top: 32px; }
.article-body p { color: #374151; margin-bottom: 24px; }
.tw-dark .article-body p { color: #d1d5db; }
.article-body ul, .article-body ol { margin-bottom: 32px; padding-left: 24px; }
.article-body li { color: #374151; }
.tw-dark .article-body li { color: #d1d5db; }
.article-body blockquote { border-left: 4px solid #3b82f6; padding: 16px 24px; background: #eff6ff; border-radius: 8px; margin: 32px 0; font-style: italic; }
.tw-dark .article-body blockquote { background: rgba(30,64,175,.2); }
.article-body blockquote p { color: #6b7280; margin: 0; font-size: 18px; font-weight: 500; }
.tw-dark .article-body blockquote p { color: #9ca3af; }
.article-body code { background:#f3f4f6; padding:2px 6px; border-radius:6px; font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:90%; }
.tw-dark .article-body code { background:#1f2937; }
.article-body pre { background:#111827; color:#fff; padding:24px; border-radius:12px; overflow-x:auto; margin:32px 0; box-shadow:0 12px 24px rgba(0,0,0,.2); }
.article-body pre code { background:transparent; padding:0; }
.article-body a { color:#2563eb; text-decoration:none; }
.article-body a:hover { text-decoration:underline; }
.tw-dark .article-body a { color:#60a5fa; }
.article-body img { border-radius:12px; box-shadow:0 10px 20px rgba(0,0,0,.08); margin:32px auto; display:block; }
.article-body strong { font-weight:600; }

/* Tables */
.article-body table { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; margin:32px 0; box-shadow:0 8px 24px rgba(0,0,0,.05); }
.tw-dark .article-body table { background:#1f2937; }
.article-body th { background:#f9fafb; padding:16px 24px; text-align:left; font-weight:600; color:var(--primary-text-color); }
.tw-dark .article-body th { background:#374151; }
.article-body td { padding:16px 24px; border-top:1px solid #e5e7eb; color:#374151; }
.tw-dark .article-body td { border-color:#4b5563; color:#d1d5db; }

/* TOC */
#table-of-contents {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.table-of-contents { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:24px; }
.tw-dark .table-of-contents { background:#17181b; border-color:#374151; }
div#table-of-contents h3 { 
    font-size:18px !important; 
    font-weight:700 !important; 
    margin-bottom:16px !important; 
    color: #1f2937 !important;
    text-align: left !important;
    padding-left: -10px !important;
    margin-left: -20px !important;
}
.table-of-contents ul { list-style:disc; padding:0; margin:0; padding-left: 20px; }
.table-of-contents a { color:#6b7280; font-size:14px; display:block; padding:4px 0; text-decoration:none; transition:color .2s ease; }
.table-of-contents a:hover { color:#2563eb; text-decoration:underline; }
.tw-dark .table-of-contents a { color:#9ca3af; }

/* Main level items (h2) - show bullets */
.toc-level-2 { list-style: disc; padding-left: 0; }
.toc-level-2::before { display: none; }

/* Sub-level items - show hyphens */
.toc-level-3 { padding-left: 24px; list-style: none; }
.toc-level-3::before { content: "– "; color: #6b7280; }
.toc-level-4 { padding-left: 40px; list-style: none; }
.toc-level-4::before { content: "– "; color: #6b7280; }
.tw-dark .toc-level-3::before,
.tw-dark .toc-level-4::before { color: #9ca3af; }
.tw-dark div#table-of-contents h3 { color: #f9fafb !important; }

/* Related */
.related-articles { background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:32px; }
.tw-dark .related-articles { background:#17181b; border-color:#374151; }
.related-article-card { background:#f9fafb; border-radius:12px; padding:16px; transition: transform .2s ease, box-shadow .2s ease; }
.related-article-card:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.08); }
.tw-dark .related-article-card { background:#1f2937; }
.related-article-card h4 { font-weight:600; margin-bottom:8px; }
.related-article-card p { font-size:14px; color:#6b7280; margin-bottom:12px; }
.tw-dark .related-article-card p { color:#9ca3af; }
.related-article-meta { font-size:12px; color:#6b7280; }

/* Navigation */
.article-navigation { display:flex; flex-direction:column; gap:16px; padding:32px 0; border-top:1px solid #e5e7eb; }
.tw-dark .article-navigation { border-color:#374151; }
.nav-button { display:flex; align-items:center; gap:8px; padding:12px 20px; border-radius:10px; background:#f3f4f6; color:#374151; font-weight:500; }
.nav-button:hover { background:#e5e7eb; }
.tw-dark .nav-button { background:#1f2937; color:#d1d5db; }
.tw-dark .nav-button:hover { background:#374151; }
.nav-button:disabled { opacity:.5; cursor:not-allowed; }
#nav-prev:not(:disabled), #nav-next:not(:disabled) { 
    opacity: 1 !important; 
    cursor: pointer; 
    background: #f3f4f6 !important;
    color: #374151 !important;
}
#nav-prev:not(:disabled):hover, #nav-next:not(:disabled):hover { 
    background: #e5e7eb !important; 
    transform: translateY(-1px);
}
.tw-dark #nav-prev:not(:disabled), .tw-dark #nav-next:not(:disabled) { 
    background: #1f2937 !important;
    color: #d1d5db !important;
}
.tw-dark #nav-prev:not(:disabled):hover, .tw-dark #nav-next:not(:disabled):hover { 
    background: #374151 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .article-body { font-size: 16px; }
  .article-body h2 { font-size: 24px; margin-top: 48px; }
  .article-body h3 { font-size: 20px; margin-top: 32px; }
  .article-body p { font-size: 16px; }
  .article-content { padding: 0 12px; }
}

/* Print */
@media print {
  .reading-progress, header, .related-articles, .article-navigation, footer { display:none !important; }
  .article-body, .article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { color:#000 !important; }
}

/* Misc */
.article-header-bg { background-image: var(--hero-bg-img); background-size: 50px 50px; background-repeat: repeat; }
.notification { position:fixed; top:16px; right:16px; padding:16px 24px; border-radius:12px; box-shadow: 0 10px 20px rgba(0,0,0,.08); z-index:50; max-width: 420px; transition: all .3s ease; }
.notification.success { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.notification.error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.article-body hr { border-color: var(--hr-color); margin: 32px 0; }
.article-body em { font-style: italic; color:#6b7280; }
.tw-dark .article-body em { color:#9ca3af; }
.article-body mark { background: #fef08a; padding: 0 4px; border-radius: 4px; }
.article-title { font-size: 40px; font-weight: 700; line-height: 1.2; }
.article-excerpt { font-size: 20px; line-height: 1.7; }
.article-meta-item { display:flex; align-items:center; gap:8px; }
.breadcrumb-nav { display:flex; align-items:center; gap:8px; font-size:14px; color:#6b7280; }
.breadcrumb-nav a:hover { color:#374151; }