/* ============================================================
   Content Styles — applied inside .note-content
   These match class names used in the 47 HTML content files.
   Editorial aesthetic: warm, typographic, restrained motion.
   ============================================================ */

.note-content {
  font-size: 1rem;
  line-height: 1.8;
  color: #1a1a1a;
}

/* --- Typography --- */
.note-content h2 {
  
  font-size: 1.375rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0ece6;
  letter-spacing: -0.01em;
  position: relative;
}

.note-content h3 {
  
  font-size: 1.125rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.005em;
}

.note-content h4 {
  
  font-size: 1rem;
  font-weight: 600;
  color: #5c5650;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.note-content p {
  margin-bottom: 1rem;
}

.note-content strong {
  font-weight: 600;
  color: #1a1a1a;
}

.note-content ul, .note-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.note-content li {
  margin-bottom: 0.35rem;
}

.note-content li::marker {
  color: #8a837b;
}

/* --- Inline code --- */
.note-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: #f3f1ed;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: #9a3412;
}

/* --- Code blocks --- */
.note-content pre {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  background: #fdfcfb;
  border: 1px solid #f0ece6;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  overflow-x: auto;
  position: relative;
}

.note-content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: #1a1a1a;
  font-size: inherit;
}

.note-content pre code.hljs {
  background: transparent;
  padding: 0;
}

.note-content pre[data-lang] {
  padding-top: 2.25rem;
}

.note-content pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  font-size: 0.6875rem;
  color: #8a837b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

/* Hexo highlight.js code blocks */
.note-content figure.highlight {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  background: #fdfcfb;
  border: 1px solid #f0ece6;
  border-radius: 8px;
  padding: 2.25rem 1.25rem 1rem;
  margin: 1.25rem 0;
  overflow-x: auto;
}

.note-content figure.highlight::after {
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: #8a837b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
}

.note-content figure.highlight.text::after { content: 'text'; }
.note-content figure.highlight.bash::after { content: 'bash'; }
.note-content figure.highlight.shell::after { content: 'shell'; }
.note-content figure.highlight.javascript::after { content: 'javascript'; }
.note-content figure.highlight.js::after { content: 'js'; }
.note-content figure.highlight.typescript::after { content: 'typescript'; }
.note-content figure.highlight.ts::after { content: 'ts'; }
.note-content figure.highlight.go::after { content: 'go'; }
.note-content figure.highlight.rust::after { content: 'rust'; }
.note-content figure.highlight.python::after { content: 'python'; }
.note-content figure.highlight.java::after { content: 'java'; }
.note-content figure.highlight.yaml::after { content: 'yaml'; }
.note-content figure.highlight.json::after { content: 'json'; }
.note-content figure.highlight.toml::after { content: 'toml'; }
.note-content figure.highlight.sql::after { content: 'sql'; }
.note-content figure.highlight.dockerfile::after { content: 'dockerfile'; }
.note-content figure.highlight.nginx::after { content: 'nginx'; }
.note-content figure.highlight.lua::after { content: 'lua'; }
.note-content figure.highlight.html::after { content: 'html'; }
.note-content figure.highlight.css::after { content: 'css'; }
.note-content figure.highlight.c::after { content: 'c'; }
.note-content figure.highlight.cpp::after { content: 'c++'; }
.note-content figure.highlight.redis::after { content: 'redis'; }
.note-content figure.highlight.protobuf::after { content: 'protobuf'; }
.note-content figure.highlight.hcl::after { content: 'hcl'; }
.note-content figure.highlight.makefile::after { content: 'makefile'; }

.note-content figure.highlight table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  border: none;
}

.note-content figure.highlight tr,
.note-content figure.highlight tr:hover td {
  background: transparent;
}

.note-content figure.highlight td {
  padding: 0;
  border: none;
  vertical-align: top;
}

.note-content figure.highlight td.code {
  width: 100%;
}

.note-content figure.highlight pre {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

/* --- Code block wrapper (holds pre + copy button) --- */
.code-block-wrapper {
  position: relative;
  margin: 1.25rem 0;
}

.code-block-wrapper pre {
  margin: 0;
}

/* --- Copy button --- */
.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: #8a837b;
  background: #ffffff;
  border: 1px solid #e8e4de;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  opacity: 0;
  transition: all 150ms ease;
  z-index: 10;
}

.code-block-wrapper:hover .copy-btn,
.note-content figure.highlight:hover .copy-btn {
  opacity: 1;
}

.copy-btn:hover {
  color: #c2410c;
  border-color: #c2410c;
}

.copy-btn.copied {
  color: #15803d;
  border-color: #15803d;
  opacity: 1;
}

/* --- Heading anchors --- */
.heading-anchor {
  font-family: inherit;
  font-size: 0.875em;
  color: #8a837b;
  text-decoration: none;
  margin-left: 0.5rem;
  opacity: 0;
  transition: opacity 150ms ease;
}

h2:hover .heading-anchor,
h3:hover .heading-anchor,
h4:hover .heading-anchor {
  opacity: 1;
}

.heading-anchor:hover {
  color: #c2410c;
}

/* --- Tables --- */
.note-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.875rem;
  table-layout: auto;
}

.note-content th:first-child,
.note-content td:first-child {
  white-space: nowrap;
}

.note-content th {
  white-space: nowrap;
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 0.75rem;
  background: #f3f1ed;
  border-bottom: 2px solid #e8e4de;
  color: #1a1a1a;
}

.note-content td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #f0ece6;
  vertical-align: top;
}

.note-content tr:hover td {
  background: #f3f1ed;
}

/* --- Roadmap / article list --- */
.roadmap {
  margin: var(--space-xl) 0;
}

.roadmap__phase {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.roadmap__phase:last-child {
  margin-bottom: 0;
}

.roadmap__phase-header,
.roadmap__phase-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  margin: 0 0 var(--space-md);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-align: left;
}

.roadmap__phase-header {
  cursor: pointer;
}

.roadmap__phase-title::before,
.roadmap__phase-dot {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #60a5fa;
}

.roadmap__phase-title a {
  color: inherit;
  border-bottom: none;
}

.roadmap__phase-name {
  flex: 1 1 auto;
  min-width: 0;
}

.roadmap__phase-count,
.roadmap__phase-toggle {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: 400;
}

.roadmap__phase-toggle {
  margin-left: auto;
  transition: transform var(--transition-fast);
}

.roadmap__phase-toggle--collapsed {
  transform: rotate(-90deg);
}

.roadmap__list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}

.note-content .roadmap__phase {
  border-color: #bfdbfe;
}

.note-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: none;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  min-width: 0;
}

.note-item__index {
  flex: 0 0 2em;
  min-width: 2em;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: right;
}

.note-item__index--outline {
  color: var(--color-accent);
}

.note-item__title {
  flex: 0 0 auto;
  max-width: 45%;
  min-width: 0;
  color: var(--color-accent);
  white-space: normal;
  overflow-wrap: anywhere;
}

.note-item__title a {
  color: inherit;
  border-bottom: none;
}

.note-item__desc {
  flex: 1 1 auto;
  min-width: 12rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

.note-content .note-item {
  border-bottom: none;
  align-items: flex-start;
  min-width: 0;
}

.note-content .note-item__title {
  color: var(--color-text);
}

@media (max-width: 820px) {
  .note-item {
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }

  .note-item__title {
    flex-basis: 100%;
    max-width: 100%;
  }

  .note-item__desc {
    flex-basis: 100%;
    min-width: 0;
    padding-left: 2.75rem;
  }
}

/* --- Blockquotes --- */
.note-content blockquote {
  border-left: 3px solid #c2410c;
  padding: 0.75rem 1.25rem;
  margin: 1.25rem 0;
  background: #f3f1ed;
  border-radius: 0 8px 8px 0;
  color: #5c5650;
  font-style: italic;
}

/* ============================================================
   Component Classes — Bold editorial redesign
   ============================================================ */

/* --- Callout boxes --- */
.callout {
  position: relative;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  border-left: 4px solid #1d4ed8;
  background: #eff6ff;
}

.callout__title {
  
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: #1d4ed8;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout--info {
  border-left-color: #1d4ed8;
  background: #eff6ff;
}
.callout--info .callout__title { color: #1d4ed8; }

.callout--success {
  border-left-color: #15803d;
  background: #f0fdf4;
}
.callout--success .callout__title { color: #15803d; }

.callout--warning {
  border-left-color: #a16207;
  background: #fefce8;
}
.callout--warning .callout__title { color: #a16207; }

.callout--danger {
  border-left-color: #b91c1c;
  background: #fef2f2;
}
.callout--danger .callout__title { color: #b91c1c; }

.callout--qa {
  border-left-color: #7c3aed;
  background: #f5f3ff;
}
.callout--qa .callout__title {
  color: #6d28d9;
}
.callout--qa .callout__title::before {
  content: 'Q: ';
  color: #7c3aed;
}
.callout--qa + .callout--qa {
  margin-top: 0.75rem;
}

/* --- Analogy box --- */
.analogy {
  position: relative;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem 1.25rem 2.5rem;
  background: linear-gradient(135deg, #fdf4ff 0%, #faf5ff 100%);
  border: 1px solid #f0e4f7;
  border-radius: 8px;
  font-style: italic;
  color: #5c5650;
  line-height: 1.7;
}

.analogy::before {
  content: '"';
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  font-size: 2.5rem;
  font-family: Georgia, serif;
  color: #d8b4fe;
  line-height: 1;
}

/* --- Command cards --- */
.cmd-card {
  background: #ffffff;
  border: 1px solid #e8e4de;
  border-radius: 8px;
  margin: 1rem 0;
  overflow: hidden;
  transition: box-shadow 150ms ease;
}

.cmd-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.cmd-card__name {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  background: #1a1a1a;
  color: #f5f3f0;
  margin: 0;
}

.cmd-card__syntax {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0.5rem 1rem;
  background: #fdfcfb;
  border-bottom: 1px solid #f0ece6;
  margin: 0;
  color: #c2410c;
}

.cmd-card__desc {
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  color: #5c5650;
  margin: 0;
}

/* --- Recap / summary box --- */
.recap {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: #f3f1ed;
  border: 1px solid #f0ece6;
  border-radius: 8px;
}

.recap__title {
  
  font-size: 0.875rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e8e4de;
}

/* --- Exercise box --- */
.exercise {
  margin: 2rem 0;
  padding: 1.5rem;
  border: 2px dashed #e8e4de;
  border-radius: 8px;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(232, 228, 222, 0.15) 10px,
    rgba(232, 228, 222, 0.15) 11px
  );
}

.exercise__title,
.exercise h2 {
  
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1rem;
  border-bottom: none;
  margin-top: 0;
  padding-bottom: 0;
}

/* --- Collapsible answer (details/summary) --- */
.answer {
  margin: 0.75rem 0 0;
  border: 1px solid #e2ddd4;
  border-radius: 6px;
  background: #fcfbf9;
  overflow: hidden;
}

.answer > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #c2410c;
  user-select: none;
}

.answer > summary::-webkit-details-marker {
  display: none;
}

.answer > summary::before {
  content: "▸ ";
  display: inline-block;
  color: #c2410c;
}

.answer[open] > summary::before {
  content: "▾ ";
}

.answer[open] > summary {
  border-bottom: 1px solid #e2ddd4;
}

.answer__body {
  padding: 0.875rem;
}

.answer__body > :first-child {
  margin-top: 0;
}

.answer__body > :last-child {
  margin-bottom: 0;
}

/* --- Q&A supplement --- */
.qa-supplement {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border: 1px solid #e8e4de;
  border-radius: 8px;
}

.qa-supplement__title,
.qa-supplement h3 {
  
  font-size: 1rem;
  font-weight: 700;
  color: #c2410c;
  margin-bottom: 0.75rem;
  margin-top: 0;
}

/* --- Tags --- */
.tag {
  display: inline-block;
  font-family: inherit;
  font-size: 0.6875rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #f3f1ed;
  border: 1px solid #e8e4de;
  color: #5c5650;
  letter-spacing: 0.03em;
}

.tag--accent {
  background: var(--color-accent-soft);
  border-color: #c2410c;
  color: #c2410c;
}

/* --- Phase indicator --- */
.phase-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  
  font-size: 0.75rem;
  font-weight: 600;
  color: #c2410c;
  background: var(--color-accent-soft);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}

/* --- Timeline (used in terminal notes) --- */
.timeline {
  position: relative;
  margin: 1.5rem 0;
  padding-left: 2rem;
  border-left: 2px solid #e8e4de;
}

.timeline-item {
  position: relative;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #f0ece6;
}

.timeline-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.4rem;
  width: 8px;
  height: 8px;
  background: #c2410c;
  border-radius: 50%;
  transform: translateX(-3px);
}

/* --- Flow diagram (used in some notes) --- */
.flow-diagram {
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #e8e4de;
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  overflow-x: auto;
}

/* --- Mermaid diagram --- */
.mermaid-diagram {
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #e8e4de;
  border-radius: 8px;
  text-align: center;
  overflow-x: auto;
}

.mermaid-diagram pre.mermaid {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  text-align: center;
}

.mermaid-diagram .mermaid-rendered {
  line-height: normal;
}

.mermaid-diagram .mermaid-rendered svg {
  max-width: 100%;
  height: auto;
}

.mermaid-diagram pre.mermaid.mermaid-error {
  color: #b91c1c;
  font-size: 0.8125rem;
  text-align: left;
  white-space: pre-wrap;
}

/* --- Horizontal rule --- */
.note-content hr {
  border: none;
  border-top: 1px solid #f0ece6;
  margin: 2rem 0;
}

/* --- Images --- */
.note-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1rem 0;
}

/* --- Definition lists (used in some content) --- */
.note-content dl {
  margin: 1rem 0;
}

.note-content dt {
  
  font-weight: 600;
  color: #1a1a1a;
  margin-top: 0.75rem;
}

.note-content dd {
  margin-left: 1rem;
  color: #5c5650;
}