/* ── Fonts — all variants matching Medium exactly ── */

/* sohne */
@font-face { font-family: "sohne"; src: url("/public/fonts/sohne-300-normal.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "sohne"; src: url("/public/fonts/sohne-300-italic.woff") format("woff"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "sohne"; src: url("/public/fonts/sohne-400-normal.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "sohne"; src: url("/public/fonts/sohne-400-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "sohne"; src: url("/public/fonts/sohne-500-normal.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "sohne"; src: url("/public/fonts/sohne-500-italic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "sohne"; src: url("/public/fonts/sohne-700-normal.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "sohne"; src: url("/public/fonts/sohne-700-italic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

/* source-serif-pro */
@font-face { font-family: "source-serif-pro"; src: url("/public/fonts/source-serif-pro-400-normal.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "source-serif-pro"; src: url("/public/fonts/source-serif-pro-400-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "source-serif-pro"; src: url("/public/fonts/source-serif-pro-700-normal.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "source-serif-pro"; src: url("/public/fonts/source-serif-pro-700-italic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

/* source-code-pro */
@font-face { font-family: "source-code-pro"; src: url("/public/fonts/source-code-pro-400-normal.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "source-code-pro"; src: url("/public/fonts/source-code-pro-400-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "source-code-pro"; src: url("/public/fonts/source-code-pro-700-normal.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "source-code-pro"; src: url("/public/fonts/source-code-pro-700-italic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

/* charter */
@font-face { font-family: "charter"; src: url("/public/fonts/charter-400-normal.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "charter"; src: url("/public/fonts/charter-400-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "charter"; src: url("/public/fonts/charter-700-normal.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "charter"; src: url("/public/fonts/charter-700-italic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

/* gt-super */
@font-face { font-family: "gt-super"; src: url("/public/fonts/gt-super-400-normal.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

/* ── Variables ── */
:root {
  --serif: "source-serif-pro", "charter", Georgia, Cambria, "Times New Roman", Times, serif;
  --sans: "sohne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "source-code-pro", Menlo, Monaco, "Courier New", Courier, monospace;
}

/* ── Post body prose — Medium exact values ── */
.post-body {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 32px;
  letter-spacing: -0.003em;
  color: rgb(36, 36, 36);
  word-break: break-word;
}

/* Paragraphs: 33.6px visual gap */
.post-body p {
  margin-top: 0;
  margin-bottom: 0;
}
.post-body p + p,
.post-body ul + p,
.post-body ol + p,
.post-body pre + p,
.post-body blockquote + p {
  margin-top: 33.6px;
}

/* Headings */
.post-body h1, .post-body h2, .post-body h3, .post-body h4 {
  font-family: var(--sans);
  font-weight: 700;
  color: rgb(36, 36, 36);
}

.post-body h2 {
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.384px;
  margin-top: 37.6px;
  margin-bottom: 12px;
}

.post-body h3 {
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.32px;
  margin-top: 37.6px;
  margin-bottom: 8px;
}

.post-body h4 {
  font-size: 18px;
  line-height: 22px;
  margin-top: 33.6px;
  margin-bottom: 8px;
}

/* First element after heading: no extra top margin */
.post-body h2 + p,
.post-body h3 + p,
.post-body h4 + p { margin-top: 0; }
.post-body h2 + ul, .post-body h3 + ul, .post-body h4 + ul,
.post-body h2 + ol, .post-body h3 + ol, .post-body h4 + ol { margin-top: 12px; }
.post-body h2 + pre, .post-body h3 + pre { margin-top: 12px; }
.post-body h2 + blockquote, .post-body h3 + blockquote { margin-top: 12px; }

/* Links */
.post-body a {
  color: var(--accent, inherit);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}
.post-body a:hover { text-decoration-color: var(--accent, rgb(36,36,36)); }

/* Bold / Italic */
.post-body strong { font-weight: 700; }
.post-body em { font-style: italic; }

/* Blockquote */
.post-body blockquote {
  border-left: 3px solid var(--accent, rgb(36, 36, 36));
  padding: 0 0 0 20px;
  margin: 33.6px 0 0;
  font-style: italic;
  color: rgb(107, 107, 107);
}

/* Inline code */
.post-body code {
  font-family: var(--mono);
  font-size: 15px;
  background: rgb(242, 242, 242);
  padding: 2px 4px;
  border-radius: 0;
}

/* Code blocks */
.post-body pre {
  padding: 20px 24px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 33.6px 0 0;
  font-size: 0;
  border: none !important;
  outline: none;
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: #555 #282c34;
}
.post-body pre::-webkit-scrollbar { height: 6px; }
.post-body pre::-webkit-scrollbar-track { background: #282c34; border-radius: 0 0 8px 8px; }
.post-body pre::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
.post-body pre::-webkit-scrollbar-thumb:hover { background: #777; }
.post-body pre,
.post-body pre code,
.post-body pre .hljs {
  background: #282c34 !important;
  color: #abb2bf !important;
  border: none !important;
}
.post-body pre code {
  padding: 0;
  font-size: 15px;
  line-height: 1.6;
}

/* Lists */
.post-body ul { list-style: none; padding: 0; margin: 33.6px 0 0; }
.post-body ol { list-style: none; padding: 0; margin: 33.6px 0 0; }

.post-body ul > li { list-style: disc; margin-left: 30px; }
.post-body ol > li { list-style: decimal; margin-left: 30px; }

.post-body li { margin-top: 13.6px; }
.post-body li:first-child { margin-top: 0; }
.post-body li > p { margin: 0; }

/* Images */
.post-body img {
  max-width: 100%;
  border-radius: 4px;
  margin: 33.6px auto 0;
  display: block;
}

/* Tables */
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 33.6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  display: block;
  overflow-x: auto;
}
.post-body thead { border-bottom: 2px solid #e0e0e0; }
[data-theme="dark"] .post-body thead { border-bottom-color: #333; }
.post-body th {
  text-align: left;
  font-weight: 700;
  font-family: var(--sans);
  padding: 8px 12px;
  white-space: nowrap;
}
.post-body td {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
}
[data-theme="dark"] .post-body td { border-bottom-color: #252525; }
.post-body td code { font-size: 13px; white-space: nowrap; }

/* Scrollable code blocks */
.post-body pre.scrollable {
  max-height: 400px !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
}
.post-body pre.scrollable code,
.post-body pre.scrollable .hljs {
  max-height: none !important;
  overflow: visible !important;
}
.post-body pre.scrollable::-webkit-scrollbar { width: 6px; }
.post-body pre.scrollable::-webkit-scrollbar-track { background: #282c34; }
.post-body pre.scrollable::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }

/* Horizontal rule — three-dot separator */
.post-body hr {
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32px 0 14px;
  height: 37px;
}
.post-body hr::before {
  content: "···";
  font-size: 30px;
  letter-spacing: 20px;
  color: rgb(36, 36, 36);
}

/* ── Audio player ── */
.audio-player {
  margin: 33.6px 0 0;
  border-radius: 12px;
  overflow: hidden;
  background: #f7f7f7;
  border: 1px solid #e8e8e8;
}
.audio-player audio { display: none; }
.ap-cover {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
}
.ap-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}
.ap-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--accent, #242424);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s, opacity 0.15s;
}
.ap-play:hover { transform: scale(1.08); }
.ap-play:active { transform: scale(0.96); }
.ap-middle { flex: 1; min-width: 0; }
.ap-progress-wrap {
  height: 6px;
  background: #ddd;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}
.ap-progress {
  height: 100%;
  background: var(--accent, #242424);
  border-radius: 3px;
  width: 0%;
  position: relative;
  transition: width 0.1s linear;
}
.ap-handle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent, #242424);
  position: absolute;
  right: -7px;
  top: -4px;
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.audio-player:hover .ap-handle,
.ap-playing .ap-handle { opacity: 1; }
.ap-time {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 12px;
  color: #999;
  margin-top: 6px;
  user-select: none;
}

/* Dark mode audio player */
[data-theme="dark"] .audio-player {
  background: #1e1e1e;
  border-color: #333;
}
[data-theme="dark"] .ap-progress-wrap { background: #333; }
[data-theme="dark"] .ap-time { color: #666; }

/* ── EasyMDE overrides ── */
.EasyMDEContainer .CodeMirror {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
  border: 1px solid #e5e7eb;
  border-radius: 0 0 8px 8px;
  min-height: 420px;
  padding: 14px 16px;
}

.EasyMDEContainer .CodeMirror:focus-within {
  border-color: #9ca3af;
}

.editor-toolbar {
  border: 1px solid #e5e7eb !important;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
  background: #f9fafb !important;
  padding: 4px 8px !important;
  position: sticky !important;
  top: 56px !important;
  z-index: 40 !important;
}

.editor-toolbar button { color: #6b7280 !important; }
.editor-toolbar button:hover, .editor-toolbar button.active {
  background: #e5e7eb !important;
  border-color: transparent !important;
  color: #111827 !important;
}

.editor-toolbar i.separator { border-color: #e5e7eb !important; }

.editor-preview {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 32px;
  padding: 22px 24px;
  background: #fff;
}

.editor-preview h1, .editor-preview h2, .editor-preview h3 {
  font-family: var(--sans);
  font-weight: 700;
  margin: 1.4em 0 0.3em;
}

.editor-preview code {
  font-family: var(--mono);
  font-size: 15px;
  background: rgb(242, 242, 242);
  padding: 2px 4px;
}

.editor-preview pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 18px 20px;
  border-radius: 8px;
  overflow-x: auto;
}

.editor-preview pre code { background: none; padding: 0; font-size: 14px; color: inherit; }

.editor-preview blockquote {
  border-left: 3px solid rgb(36, 36, 36);
  padding-left: 20px;
  color: rgb(107, 107, 107);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DARK MODE
   Uses [data-theme="dark"] on <html>. Overrides Tailwind utilities + custom CSS.
   ══════════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] { color-scheme: dark; }

/* ── Backgrounds ── */
[data-theme="dark"] body { background: #121212 !important; color: #e0e0e0 !important; }
[data-theme="dark"] .bg-white { background: #1a1a1a !important; }
[data-theme="dark"] .bg-white\/95 { background: rgba(26,26,26,0.95) !important; }
[data-theme="dark"] .bg-gray-50 { background: #1e1e1e !important; }
[data-theme="dark"] .bg-gray-100 { background: #252525 !important; }
[data-theme="dark"] .bg-red-50 { background: rgba(220,38,38,0.1) !important; }

/* ── Text ── */
[data-theme="dark"] .text-gray-900 { color: #e0e0e0 !important; }
[data-theme="dark"] .text-gray-800 { color: #d0d0d0 !important; }
[data-theme="dark"] .text-gray-700 { color: #b0b0b0 !important; }
[data-theme="dark"] .text-gray-600 { color: #a0a0a0 !important; }
[data-theme="dark"] .text-gray-500 { color: #909090 !important; }
[data-theme="dark"] .text-gray-400 { color: #707070 !important; }
[data-theme="dark"] .text-gray-300 { color: #606060 !important; }
[data-theme="dark"] .text-gray-200 { color: #505050 !important; }
[data-theme="dark"] .text-gray-100 { color: #303030 !important; }
[data-theme="dark"] .text-\[\#242424\] { color: #e0e0e0 !important; }
[data-theme="dark"] .text-\[\#6b6b6b\] { color: #a0a0a0 !important; }

/* ── Borders ── */
[data-theme="dark"] .border-gray-200 { border-color: #2a2a2a !important; }
[data-theme="dark"] .border-gray-100 { border-color: #222222 !important; }
[data-theme="dark"] .border-gray-300 { border-color: #333333 !important; }
[data-theme="dark"] .border-gray-400 { border-color: #444444 !important; }
[data-theme="dark"] .border-\[\#f2f2f2\] { border-color: #2a2a2a !important; }
[data-theme="dark"] .border-red-200 { border-color: rgba(220,38,38,0.3) !important; }
[data-theme="dark"] .divide-gray-100 > * + * { border-color: #222222 !important; }

/* ── Hover states ── */
[data-theme="dark"] .hover\:bg-gray-50:hover { background: #222222 !important; }
[data-theme="dark"] .hover\:bg-gray-100:hover { background: #2a2a2a !important; }
[data-theme="dark"] .hover\:text-gray-900:hover { color: #ffffff !important; }
[data-theme="dark"] .hover\:text-gray-800:hover { color: #e0e0e0 !important; }
[data-theme="dark"] .hover\:text-gray-700:hover { color: #d0d0d0 !important; }
[data-theme="dark"] .hover\:text-gray-600:hover { color: #c0c0c0 !important; }
[data-theme="dark"] .hover\:border-gray-300:hover { border-color: #444444 !important; }
[data-theme="dark"] .hover\:border-gray-400:hover { border-color: #555555 !important; }

/* ── Focus rings ── */
[data-theme="dark"] .focus\:ring-gray-900:focus { --tw-ring-color: #e0e0e0 !important; }
[data-theme="dark"] .focus-within\:ring-gray-900:focus-within { --tw-ring-color: #e0e0e0 !important; }

/* ── Placeholders ── */
[data-theme="dark"] .placeholder-gray-300::placeholder { color: #505050 !important; }
[data-theme="dark"] .placeholder-gray-400::placeholder { color: #555555 !important; }

/* ── Inputs ── */
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
  background: #1e1e1e;
  color: #e0e0e0;
  border-color: #333333;
}

/* ── Post body ── */
[data-theme="dark"] .post-body { color: #d0d0d0; }
[data-theme="dark"] .post-body h1,
[data-theme="dark"] .post-body h2,
[data-theme="dark"] .post-body h3,
[data-theme="dark"] .post-body h4 { color: #e8e8e8; }
[data-theme="dark"] .post-body blockquote { color: #909090; border-left-color: var(--accent); }
[data-theme="dark"] .post-body code { background: #2a2a2a; color: #d0d0d0; }
[data-theme="dark"] .post-body a { color: var(--accent); }
[data-theme="dark"] .post-body hr::before { color: #606060; }

/* ── Category pills ── */
[data-theme="dark"] [style*="color-mix"] {
  background: color-mix(in srgb, var(--accent) 15%, #1a1a1a) !important;
}

/* ── Share popover ── */
[data-theme="dark"] #share-popover { background: #1e1e1e !important; border-color: #333 !important; }
[data-theme="dark"] #share-url { background: #252525 !important; border-color: #333 !important; color: #e0e0e0 !important; }
[data-theme="dark"] .text-\[\#6b6b6b\]:hover, [data-theme="dark"] .hover\:text-\[\#242424\]:hover { color: #ffffff !important; }

/* ── User dropdown ── */
[data-theme="dark"] #user-dropdown { background: #1e1e1e !important; border-color: #333 !important; }

/* ── Scrollbar (WebKit) ── */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #121212; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* ── EasyMDE dark ── */
[data-theme="dark"] .EasyMDEContainer .CodeMirror {
  background: #1a1a1a !important;
  color: #d0d0d0 !important;
  border-color: #333 !important;
}
[data-theme="dark"] .editor-toolbar {
  background: #1e1e1e !important;
  border-color: #333 !important;
}
[data-theme="dark"] .editor-toolbar button { color: #909090 !important; }

/* Dark mode: save toast */
[data-theme="dark"] #save-toast {
  background: rgba(34,197,94,0.1) !important;
  color: #6ee7b7 !important;
  border-color: rgba(34,197,94,0.3) !important;
}
[data-theme="dark"] .editor-toolbar button:hover,
[data-theme="dark"] .editor-toolbar button.active {
  background: #2a2a2a !important;
  color: #e0e0e0 !important;
}
[data-theme="dark"] .editor-toolbar i.separator { border-color: #333 !important; }
[data-theme="dark"] .editor-preview { background: #1a1a1a !important; color: #d0d0d0 !important; }
[data-theme="dark"] .editor-preview code { background: #2a2a2a !important; }
[data-theme="dark"] .editor-preview blockquote { border-left-color: var(--accent) !important; color: #909090 !important; }

/* ── Dark mode: buttons that should stay dark-on-light ── */
[data-theme="dark"] .bg-gray-900.text-white { background: #e0e0e0 !important; color: #121212 !important; }
[data-theme="dark"] .bg-gray-900.text-white:hover,
[data-theme="dark"] .hover\:bg-gray-700:hover.text-white { background: #c0c0c0 !important; color: #121212 !important; }

/* ── Login page ── */
[data-theme="dark"] .bg-gray-900.hover\:bg-gray-700 { background: #e0e0e0 !important; color: #121212 !important; }
[data-theme="dark"] .bg-gray-900.hover\:bg-gray-700:hover { background: #c0c0c0 !important; }

/* ── Shadow softening ── */
[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; }
[data-theme="dark"] .shadow-lg { box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important; }

/* ── Selection ── */
[data-theme="dark"] ::selection { background: var(--accent); color: #fff; }