/* TabFlow POS — article body typography. Used by the public article page (/blog/{slug}) and as TinyMCE's content_css,
   so the editor shows what readers will see. Colours use the theme tokens from head.php; the editor iframe sets them below. */
.mce-content-body { --bg: 255 255 255; --surface-2: 241 245 249; --line: 226 232 240; --fg: 15 23 42; --body: 71 85 105; --muted: 100 116 139;
  margin: 0; padding: 24px 28px; background: rgb(var(--bg)); font-family: 'Noto Sans Thai', system-ui, sans-serif; max-width: 780px; margin-inline: auto; }
.mce-content-body.dark { --bg: 21 25 32; --surface-2: 30 35 44; --line: 42 48 60; --fg: 241 245 249; --body: 168 177 192; --muted: 120 130 148; color-scheme: dark; }

.prose { color: rgb(var(--body)); font-size: 17px; line-height: 1.95; overflow-wrap: break-word; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: 1.45em; line-height: 1.45; font-weight: 800; color: rgb(var(--fg)); scroll-margin-top: 88px; }
.prose h3 { margin-top: 1.6em; font-size: 1.15em; line-height: 1.5; font-weight: 700; color: rgb(var(--fg)); scroll-margin-top: 88px; }
.prose h4, .prose h5, .prose h6 { margin-top: 1.4em; font-size: 1em; font-weight: 700; color: rgb(var(--fg)); }
.prose p, .prose ul, .prose ol, .prose dl, .prose figure, .prose table, .prose pre, .prose blockquote, .prose details { margin-bottom: 0; }
.prose strong, .prose b { color: rgb(var(--fg)); font-weight: 700; }
.prose a { color: #4F46E5; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dark .prose a, .prose.dark a { color: #A5B4FC; }
.prose a[id]:not([href]) { color: inherit; text-decoration: none; font-weight: inherit; }
.prose ul { list-style: disc; padding-left: 1.4em; } .prose ol { list-style: decimal; padding-left: 1.4em; }
.prose ul ul { list-style: circle; } .prose ol ol { list-style: lower-alpha; }
.prose li + li { margin-top: .45em; } .prose li::marker { color: #8B5CF6; }
.prose dt { font-weight: 700; color: rgb(var(--fg)); } .prose dd { margin-left: 1.4em; }
.prose blockquote { border-left: 4px solid #8B5CF6; background: rgb(var(--surface-2)); border-radius: 0 14px 14px 0; padding: .9em 1.2em; color: rgb(var(--fg)); margin-inline: 0; }
.prose code { background: rgb(var(--surface-2)); border-radius: 6px; padding: .1em .4em; font-size: .88em; }
.prose pre { background: #0f172a; color: #e2e8f0; border-radius: 14px; padding: 1em 1.2em; overflow-x: auto; font-size: 14px; line-height: 1.7; }
.prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.prose mark { background: rgba(250, 204, 21, .35); color: inherit; border-radius: 4px; padding: 0 .15em; }
.prose hr { border: 0; border-top: 1px solid rgb(var(--line)); margin: 2em 0; }
.prose sub, .prose sup { font-size: .75em; }

/* Media */
.prose img, .prose video { max-width: 100%; height: auto; border-radius: 14px; }
.prose img[style*="float: left"] { margin: .3em 1.2em .6em 0; } .prose img[style*="float: right"] { margin: .3em 0 .6em 1.2em; }
.prose figure { margin-inline: 0; } .prose figure.image { display: table; margin-inline: auto; }
.prose figure.image img { display: block; }
.prose figcaption { display: table-caption; caption-side: bottom; margin-top: .5em; text-align: center; font-size: 14px; color: rgb(var(--muted)); }
.prose iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 14px; background: #000; }
.prose audio { width: 100%; }

/* Tables */
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; }
@media (max-width: 640px) { .prose table { display: block; overflow-x: auto; width: auto !important; } }
.prose th, .prose td { border: 1px solid rgb(var(--line)); padding: .55em .8em; vertical-align: top; text-align: left; }
.prose th, .prose thead td { background: rgb(var(--surface-2)); color: rgb(var(--fg)); font-weight: 700; }
.prose caption { caption-side: top; padding-bottom: .4em; font-size: 14px; color: rgb(var(--muted)); text-align: left; }

/* Accordion (details/summary) */
.prose details { border: 1px solid rgb(var(--line)); border-radius: 14px; padding: .7em 1.1em; }
.prose details > summary { cursor: pointer; font-weight: 700; color: rgb(var(--fg)); }
.prose details[open] > summary { margin-bottom: .6em; }

/* Boxes (Formats → กล่อง…) */
.prose .note, .prose .tip, .prose .warn { border-radius: 14px; padding: .9em 1.1em; font-size: .94em; }
.prose .note { background: rgba(99, 102, 241, .07); border: 1px solid rgba(99, 102, 241, .22); }
.prose .tip { background: rgba(22, 163, 74, .08); border: 1px solid rgba(22, 163, 74, .25); }
.prose .warn { background: rgba(250, 204, 21, .12); border: 1px solid rgba(202, 138, 4, .35); }
.prose .align-left { text-align: left; } .prose .align-center { text-align: center; } .prose .align-right { text-align: right; }
.prose .page-break { border-top: 1px dashed rgb(var(--line)); margin: 2em 0; }
@media print { .prose .page-break { break-after: page; border: 0; } }