/* =============================================================================
   Chino's Blog — Prose (.chino-prose) + code-block L-brackets + syntax
 ============================================================================ */

.footer-social svg { width: 1.125rem; height: 1.125rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   7.  PROSE  (.chino-prose — markdown body)
   ───────────────────────────────────────────────────────────────────────────── */
.chino-prose {
  font-size: 1.0625rem; line-height: 1.85; color: hsl(var(--default-700));
  word-wrap: break-word; overflow-wrap: break-word;
}
html.chino-dark .chino-prose { color: hsl(var(--default-400)); }
.chino-prose > * + * { margin-top: 2em; }
.chino-prose h1, .chino-prose h2, .chino-prose h3, .chino-prose h4, .chino-prose h5, .chino-prose h6 {
  color: var(--color-heading); font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.3; text-wrap: balance;
}
.chino-prose h1 { font-size: var(--fz-5xl); margin-top: 0; margin-bottom: 1em; letter-spacing: -.03em; }
.chino-prose h2 {
  font-size: var(--fz-3xl); margin-top: 2.75em; margin-bottom: 1em; padding-top: 1.4em;
  border-top: 1px solid var(--color-divider-soft); position: relative;
}
.chino-prose h2::before {
  content: ''; position: absolute; left: 0; top: -1px; width: 2.5rem; height: 2px;
  background: linear-gradient(to right, hsl(var(--chino)), hsl(var(--accent)));
  border-radius: 1px;
}
.chino-prose h3 { font-size: var(--fz-2xl); margin-top: 2em; margin-bottom: .6em; }
.chino-prose h4 { font-size: var(--fz-xl); margin-top: 1.6em; margin-bottom: .6em; }
.chino-prose h5 { font-size: var(--fz-lg); margin-top: 1.4em; margin-bottom: .5em; }
.chino-prose h6 { font-size: var(--fz-base); margin-top: 1.4em; margin-bottom: .5em; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.chino-prose p { margin-block: 0; text-wrap: pretty; }
.chino-prose a { color: var(--color-chino); text-decoration: underline; text-decoration-color: hsla(var(--chino), .4); text-decoration-thickness: 1.5px; text-underline-offset: 3px; font-weight: 500; transition: text-decoration-color var(--t-fast), color var(--t-fast); }
.chino-prose a:hover { text-decoration-color: hsl(var(--chino)); }
.chino-prose strong { color: var(--color-heading); font-weight: 700; }
.chino-prose em { font-style: italic; color: var(--color-heading); }
.chino-prose ul, .chino-prose ol { padding-left: 1.5rem; }
.chino-prose ul { list-style: none; }
.chino-prose ol { list-style: decimal; }
.chino-prose ul > li { position: relative; padding-left: .25rem; }
.chino-prose ul > li::before { content: ''; position: absolute; left: -1rem; top: .75em; width: 5px; height: 5px; background: hsl(var(--chino)); border-radius: 1px; }
.chino-prose ul ul, .chino-prose ol ol, .chino-prose ul ol, .chino-prose ol ul { margin-top: .25em; }
.chino-prose li { margin-block: .4em; }
.chino-prose blockquote {
  position: relative; margin: 1.5em 0; padding: 1em 1.25em 1em 1.5em;
  background: hsla(var(--chino), .06); border-left: 3px solid hsl(var(--chino));
  color: hsl(var(--default-600)); font-style: italic;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
html.chino-dark .chino-prose blockquote { color: hsl(var(--default-400)); }
.chino-prose blockquote p { margin: 0; }
.chino-prose blockquote p + p { margin-top: .5em; }
.chino-prose blockquote::before {
  content: '\201C'; position: absolute; left: .5rem; top: -.25em;
  font-family: Georgia, serif; font-size: 2.5em; color: hsla(var(--chino), .25); line-height: 1;
}
.chino-prose hr { border: none; height: 1px; background: linear-gradient(to right, transparent, var(--color-divider), transparent); margin: 2.5em 0; }
.chino-prose img { border-radius: var(--radius-lg); margin-block: 1.5em; border: 1px solid var(--color-divider-soft); box-shadow: var(--shadow-md); }
.chino-prose figure { margin: 1.5em 0; }
.chino-prose figcaption { text-align: center; color: var(--color-muted); font-size: var(--fz-sm); margin-top: .5em; }
.chino-prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin-block: 1.5em; font-size: var(--fz-base); border: 1px solid var(--color-divider-soft); border-radius: var(--radius-lg); overflow: hidden; }
.chino-prose th, .chino-prose td { padding: .625rem 1rem; border-bottom: 1px solid var(--color-divider-soft); text-align: left; }
.chino-prose th { background: var(--color-surface-2); font-weight: 700; color: var(--color-heading); }
.chino-prose tr:last-child td { border-bottom: none; }

/* ── Code Block with L-bracket corners (ChinoBlog signature) ─────── */
.code-container {
  position: relative; margin-block: var(--space-6);
  border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.code-container::before, .code-container::after {
  content: ''; position: absolute; width: 14px; height: 14px; z-index: 2; pointer-events: none;
}
.code-container::before { top: -1px; left: -1px; border-top: 2px solid hsl(var(--chino)); border-left: 2px solid hsl(var(--chino)); }
.code-container::after  { top: -1px; right: -1px; border-top: 2px solid hsl(var(--chino)); border-right: 2px solid hsl(var(--chino)); }
.code-corners::before { content: ''; position: absolute; bottom: -1px; left: -1px; width: 14px; height: 14px; z-index: 2; pointer-events: none; border-bottom: 2px solid hsl(var(--ren)); border-left: 2px solid hsl(var(--ren)); }
.code-corners::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px; z-index: 2; pointer-events: none; border-bottom: 2px solid hsl(var(--ren)); border-right: 2px solid hsl(var(--ren)); }

.code-header {
  border-bottom: 1px solid var(--color-divider-soft);
  background-color: hsla(var(--ren), .08);
  justify-content: space-between; align-items: center; display: flex;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fz-xs); color: var(--color-muted);
}
.code-lang { text-transform: uppercase; letter-spacing: .05em; color: var(--color-chino); font-family: var(--font-mono); font-size: .75rem; font-weight: 600; }
.code-copy {
  border: 1px solid hsl(var(--chino-300)); background: var(--color-background);
  width: 28px; height: 28px; transition: all .2s; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-muted);
}
.code-copy:hover { background: hsl(var(--chino-50)); color: var(--color-chino); border-color: hsl(var(--chino)); }

.chino-prose pre {
  position: relative; margin: 1.5em 0; padding: 1.125rem 1.25rem;
  background: hsl(222 24% 9%); color: hsl(220 14% 92%);
  border-radius: var(--radius-xl); font-family: var(--font-mono);
  font-size: var(--fz-sm); line-height: 1.65; overflow-x: auto;
  border: 1px solid hsla(220 16% 15%, .3); box-shadow: var(--shadow-md);
}
.chino-prose pre code { background: transparent; color: inherit; padding: 0; border-radius: 0; font-size: inherit; font-weight: 400; border: none; }

.copy-btn {
  position: absolute; top: .625rem; right: .625rem; display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .625rem; font-size: 11px; font-weight: 500; font-family: var(--font-sans);
  border-radius: var(--radius-md); background: hsla(0, 0%, 100%, .1); color: hsl(220 14% 92%);
  border: 1px solid hsla(0, 0%, 100%, .15); cursor: pointer; opacity: 0; transition: opacity var(--t-fast), background var(--t-fast);
}
.copy-btn svg { width: .75rem; height: .75rem; }
.chino-prose pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: hsla(0, 0%, 100%, .18); }
.copy-btn.is-copied { background: hsl(var(--success)); color: #fff; border-color: transparent; opacity: 1; }

/* syntax highlight (Pygments + hljs fallback) */
.chino-prose pre .highlight, .chino-prose pre .hljs { background: transparent; }
.chino-prose pre .kn, .chino-prose pre .hljs-keyword, .chino-prose pre .hljs-built_in, .chino-prose pre .hljs-name, .chino-prose pre .hljs-tag { color: hsl(280 60% 75%); }
.chino-prose pre .nn, .chino-prose pre .hljs-attr { color: hsl(195 70% 70%); }
.chino-prose pre .n, .chino-prose pre .hljs-variable, .chino-prose pre .hljs-title, .chino-prose pre .hljs-section, .chino-prose pre .hljs-attribute { color: hsl(220 14% 92%); }
.chino-prose pre .s2, .chino-prose pre .s1, .chino-prose pre .s, .chino-prose pre .sa, .chino-prose pre .hljs-string, .chino-prose pre .hljs-literal, .chino-prose pre .hljs-meta { color: hsl(120 50% 70%); }
.chino-prose pre .mi, .chino-prose pre .mf, .chino-prose pre .mb, .chino-prose pre .o, .chino-prose pre .hljs-number, .chino-prose pre .hljs-symbol, .chino-prose pre .hljs-bullet { color: hsl(30 90% 70%); }
.chino-prose pre .c1, .chino-prose pre .c, .chino-prose pre .cm, .chino-prose pre .hljs-comment, .chino-prose pre .hljs-quote { color: hsl(220 10% 55%); font-style: italic; }
.chino-prose pre .k, .chino-prose pre .kc, .chino-prose pre .kd, .chino-prose pre .hljs-selector-tag { color: hsl(195 70% 70%); }
.chino-prose pre .nf, .chino-prose pre .nc, .chino-prose pre .hljs-class .hljs-title { color: hsl(45 90% 70%); }
.chino-prose pre .err { color: hsl(0 70% 70%); }