/* knowledge.css — TrelloTriage Knowledge section (Phase 1).
   Scoped to .knowledge-* / .kn-* so it never affects unrelated pages.
   Reuses the existing portfolio.css theme variables, fonts, cards, and the 900px breakpoint. */

.knowledge-wrap,
.knowledge-article-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 90px 20px 80px;
}

/* ---------- Index header ---------- */
.knowledge-header { margin: 8px 0 26px; }
.knowledge-header h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  margin: 0 0 8px;
  background: linear-gradient(135deg, var(--accent-main), var(--accent-alt));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.knowledge-sub { color: var(--text-muted, #94a3b8); font-size: 1.05rem; margin: 0; }

/* ---------- Index grid reuses .tools-grid / .tool-card ---------- */
.knowledge-grid { margin-top: 10px; }
.kn-date {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
  margin: 2px 0 8px;
}

/* ---------- Empty state ---------- */
.knowledge-empty { display: flex; justify-content: center; padding: 40px 0; }
.knowledge-empty-card {
  text-align: center;
  max-width: 460px;
  padding: 40px 30px;
  border: 1px solid var(--glass-border, rgba(148,163,184,0.25));
  border-radius: 16px;
  background: var(--bg-card);
}
.knowledge-empty-card .project-icon { font-size: 2.4rem; }
.knowledge-empty-card h2 { margin: 12px 0 6px; }
.knowledge-empty-card p { color: var(--text-muted, #94a3b8); margin: 0 0 18px; }

/* ---------- Article page ---------- */
.knowledge-article { max-width: 760px; margin: 0 auto; }
.kn-breadcrumb { margin-bottom: 18px; }
.kn-breadcrumb a { color: var(--accent-main); text-decoration: none; }
.kn-breadcrumb a:hover { text-decoration: underline; }

.kn-article-head { margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--glass-border, rgba(148,163,184,0.25)); }
.kn-article-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.2; margin: 0 0 12px; }
.kn-desc { font-size: 1.12rem; color: var(--text-muted, #cbd5e1); margin: 0 0 12px; }
.kn-dates { font-size: 0.85rem; color: var(--text-muted, #94a3b8); margin: 0 0 12px; }

/* ---------- Article body (long-form prose) ---------- */
.kn-body { font-size: 1.05rem; line-height: 1.75; color: var(--text-body, #e2e8f0); }
body.theme-light .kn-body { color: #1e293b; }
.kn-body h2 { font-size: 1.6rem; margin: 2em 0 0.5em; line-height: 1.25; }
.kn-body h3 { font-size: 1.3rem; margin: 1.6em 0 0.4em; }
.kn-body h4 { font-size: 1.1rem; margin: 1.4em 0 0.4em; }
.kn-body p { margin: 0 0 1.15em; }
.kn-body a { color: var(--accent-main); text-decoration: underline; text-underline-offset: 2px; }
.kn-body ul, .kn-body ol { margin: 0 0 1.15em; padding-left: 1.6em; }
.kn-body li { margin: 0.3em 0; }
.kn-body dl { margin: 0 0 1.15em; }
.kn-body dt { font-weight: 600; margin-top: 0.6em; }
.kn-body dd { margin: 0 0 0.4em 1.4em; color: var(--text-muted, #cbd5e1); }
.kn-body blockquote {
  margin: 1.3em 0;
  padding: 0.6em 1.1em;
  border-left: 3px solid var(--accent-main);
  background: color-mix(in srgb, var(--accent-main) 8%, transparent);
  border-radius: 0 8px 8px 0;
  color: var(--text-muted, #cbd5e1);
}
.kn-body hr { border: none; border-top: 1px solid var(--glass-border, rgba(148,163,184,0.25)); margin: 2em 0; }
.kn-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
.kn-body :not(pre) > code {
  background: color-mix(in srgb, var(--accent-main) 12%, transparent);
  padding: 0.12em 0.4em;
  border-radius: 5px;
}
.kn-body pre {
  background: var(--bg-card, rgba(15,23,42,0.7));
  border: 1px solid var(--glass-border, rgba(148,163,184,0.25));
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 1.3em;
}
.kn-body pre code { background: none; padding: 0; }

/* Footnotes */
.kn-body .footnote { font-size: 0.9rem; color: var(--text-muted, #94a3b8); border-top: 1px solid var(--glass-border, rgba(148,163,184,0.25)); margin-top: 2.5em; padding-top: 1em; }

/* Images — responsive, aspect-ratio preserved, never overflow */
.kn-body img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 1.3em auto; }

/* Tables — responsive, horizontal scroll instead of page overflow */
.kn-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 1.3em;
  font-size: 0.96rem;
}
.kn-body th, .kn-body td {
  border: 1px solid var(--glass-border, rgba(148,163,184,0.25));
  padding: 8px 12px;
  text-align: left;
}
.kn-body th { background: color-mix(in srgb, var(--accent-main) 10%, transparent); }

/* Mermaid — readable source fallback + contained diagram */
.kn-body pre.mermaid {
  overflow-x: auto;
  text-align: center;
  background: var(--bg-card, rgba(15,23,42,0.7));
}
.kn-body pre.mermaid svg { max-width: 100%; height: auto; }
.kn-body pre.mermaid.mermaid-error { text-align: left; }
.kn-body pre.mermaid.mermaid-error::before {
  content: "Diagram source (render unavailable):";
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 6px;
}

/* ---------- Related ---------- */
.kn-related { max-width: 1180px; margin: 56px auto 0; }
.kn-related h2 { font-size: 1.4rem; margin: 0 0 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .knowledge-wrap, .knowledge-article-wrap { padding-top: 76px; }
  .knowledge-article { max-width: 100%; }
  .kn-body { font-size: 1.0rem; }
}