/* ==========================================================================
   Project 2 — Static Reader Stylesheet (Notion Dark Theme)
   ========================================================================== */

:root {
  color-scheme: dark;
}

body {
  background-color: #191919;
  color: #e3e2de;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333333; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Code Block & Prism Highlighting */
pre[class*="language-"], 
code[class*="language-"], 
.code-area {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  letter-spacing: -0.01em;
}

@media (max-width: 640px) {
  pre[class*="language-"], 
  code[class*="language-"] {
    font-size: 11px !important;
    line-height: 1.4 !important;
    padding: 8px 10px !important;
  }
}

/* Table Style */
.n-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.n-table th, .n-table td {
  border: 1px solid #2e2e2e;
  padding: 8px 12px;
  text-align: left;
}
.n-table th {
  background-color: #202020;
  font-weight: 600;
  color: #c9c8c4;
}
.n-table tr:hover td {
  background-color: #1f1f1f;
}

/* Todo Strikethrough */
.todo-done {
  text-decoration: line-through;
  color: #6b6b6b;
}

/* Progress bar reading */
#progressBar {
  transition: width 0.1s ease-out;
}

/* Mode Print / Simpan PDF */
@media print {
  header, #btnBack, #floatingTOC, #readingMeta { display: none !important; }
  body { background: #ffffff !important; color: #000000 !important; }
  .border, .border-b, .border-t, .border-l { border-color: #dddddd !important; }
  pre { border: 1px solid #ccc !important; }
}