@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Code:wght@400..700&display=swap");

/* Traven Editor Skin - Neutral Slate (default) */

/* Main editor layout and typography */
.cm-editor {
    font-family:
        "Atkinson Hyperlegible Next",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
}

.cm-editor:focus,
.cm-editor.cm-focused {
    outline: none !important;
}

.cm-scroller {
    font-family: inherit !important;
    line-height: 1.75 !important;
    padding: 10px 0 !important;
}

.cm-content {
    padding: 0 24px !important;
}

/* Gutter & Line numbers - clean, borderless, modern style */
.cm-gutters {
    background-color: transparent !important;
    border-right: none !important;
    color: #94a3b8 !important;
    font-family: "Fira Code", monospace !important;
    font-size: 0.85em !important;
    opacity: 0.7;
}

.cm-gutterElement {
    padding: 0 16px 0 8px !important;
}

/* Active line highlighting */
.cm-activeLine {
    background-color: rgba(241, 245, 249, 0.6) !important;
}

.cm-activeLineGutter {
    background-color: transparent !important;
    color: #0f172a !important;
    font-weight: 600;
    opacity: 1;
}

/* Selection highlight - clean neutral slate tint */
.cm-selectionBackground,
.cm-native-selection {
    background-color: rgba(148, 163, 184, 0.18) !important;
}

.cm-editor.cm-focused
    > .cm-scroller
    > .cm-selectionLayer
    .cm-selectionBackground {
    background-color: rgba(148, 163, 184, 0.28) !important;
}

/* Token hiding with smooth transition properties */
.cm-token-hidden {
    font-size: 0 !important;
    opacity: 0 !important;
    display: inline-block;
    width: 0;
    overflow: hidden;
    transition:
        opacity 0.12s cubic-bezier(0.4, 0, 0.2, 1),
        font-size 0.12s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Bold & Italic visual enhancements */
.cm-wysiwym-bold {
    font-weight: 700;
    color: #0f172a;
}

.cm-wysiwym-italic {
    font-style: italic;
    color: #334155;
}

.cm-wysiwym-strikethrough {
    text-decoration: line-through;
    color: #64748b;
}

/* Highlight text - soft pastel yellow */
.cm-wysiwym-highlight {
    background-color: rgba(250, 204, 21, 0.25);
    border-radius: 3px;
    padding: 1px 0;
}

/* Inline code pill styling - Neutral Slate */
.cm-wysiwym-inline-code {
    font-family: "Fira Code", ui-monospace, monospace !important;
    background-color: #f8fafc;
    color: #0f172a;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.88em;
    font-weight: 500;
    border: 1px solid #e2e8f0;
}

/* Headings style - unconditional classes to prevent layout shifts */
.cm-editor .cm-wysiwym-h1,
.cm-editor .cm-wysiwym-h2,
.cm-editor .cm-wysiwym-h3,
.cm-editor .cm-wysiwym-h4,
.cm-editor .cm-wysiwym-h5,
.cm-editor .cm-wysiwym-h6 {
    font-family: "Atkinson Hyperlegible Next", sans-serif !important;
    color: #0f172a;
    letter-spacing: -0.02em;
    text-decoration: none;
}

/* Disable underlines on heading text spans from CodeMirror highlight style */
.cm-editor .cmt-heading,
.cm-editor .tok-heading,
.cm-editor .cm-wysiwym-h1 span,
.cm-editor .cm-wysiwym-h2 span,
.cm-editor .cm-wysiwym-h3 span,
.cm-editor .cm-wysiwym-h4 span,
.cm-editor .cm-wysiwym-h5 span,
.cm-editor .cm-wysiwym-h6 span {
    text-decoration: none;
}

.cm-editor .cm-wysiwym-h1 {
    font-size: 2em;
    font-weight: 800;
    line-height: 1.2;
    padding-top: 24px;
    padding-bottom: 12px;
    margin: 0;
}

.cm-editor .cm-wysiwym-h2 {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.3;
    padding-top: 20px;
    padding-bottom: 10px;
    margin: 0;
}

.cm-editor .cm-wysiwym-h3 {
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.4;
    padding-top: 18px;
    padding-bottom: 8px;
    margin: 0;
}

.cm-editor .cm-wysiwym-h4 {
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.5;
    padding-top: 14px;
    padding-bottom: 6px;
    margin: 0;
}

.cm-editor .cm-wysiwym-h5 {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.5;
    padding-top: 12px;
    padding-bottom: 4px;
    margin: 0;
}

.cm-editor .cm-wysiwym-h6 {
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.5;
    padding-top: 10px;
    padding-bottom: 2px;
    margin: 0;
}

/* Blockquotes - indented with a discreet gray vertical side marker pipe */
.cm-editor .cm-wysiwym-blockquote {
    border-left: 3px solid #cbd5e1;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
}

/* First line of a blockquote block gets padding-top */
.cm-editor .cm-wysiwym-blockquote {
    padding-top: 10px !important;
}

/* Subsequent lines of a blockquote block should not have top padding */
.cm-editor .cm-wysiwym-blockquote + .cm-wysiwym-blockquote {
    padding-top: 2px !important;
}

/* Last line of a blockquote block gets padding-bottom */
.cm-editor .cm-wysiwym-blockquote:not(:has(+ .cm-wysiwym-blockquote)) {
    padding-bottom: 10px !important;
}

.cm-editor .cm-wysiwym-blockquote,
.cm-editor .cm-wysiwym-blockquote * {
    font-style: italic;
    color: #475569;
    line-height: 1.5 !important;
    font-family:
        "Atkinson Hyperlegible Next",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif !important;
}

/* Reduce blank line spacing immediately before and after blockquotes */
.cm-editor
    .cm-wysiwym-blockquote:not(:has(+ .cm-wysiwym-blockquote))
    + .cm-line:has(br:only-child),
.cm-editor .cm-line:has(br:only-child):has(+ .cm-wysiwym-blockquote) {
    height: 0.6em !important;
    min-height: 0.6em !important;
}

/* YAML Frontmatter blocks styled as elegant rails with monospace text */
.cm-wysiwym-frontmatter {
    background-color: #fafafa !important;
    border-left: 4px solid #64748b !important;
    font-family: "Fira Code", monospace !important;
    font-size: 0.85em !important;
    padding: 4px 0 4px 16px !important;
    margin: 0 !important;
    opacity: 0.8;
}

.cm-wysiwym-frontmatter,
.cm-wysiwym-frontmatter span {
    color: #64748b !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

.cm-wysiwym-frontmatter-active {
    background-color: #f8fafc !important;
    border-left: 4px solid #64748b !important;
    font-family: "Fira Code", monospace !important;
    font-size: 0.85em !important;
    padding: 4px 0 4px 16px !important;
    margin: 0 !important;
    opacity: 0.8;
}

.cm-wysiwym-frontmatter-active,
.cm-wysiwym-frontmatter-active span {
    color: #334155 !important;
    font-family: inherit !important;
    font-size: inherit !important;
}

/* Horizontal Rules - modern separator divider widget */
.cm-wysiwym-hr-widget {
    border: 0;
    border-top: 2px dashed #cbd5e1;
    margin: 0 !important;
    padding: 12px 0 !important;
    display: block;
    width: 100%;
}

/* Image container styling - premium image layout */
.cm-wysiwym-image-widget-container,
.cm-wysiwym-image-shortcode-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0 !important;
    padding: 12px 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    background-color: #ffffff;
    transition: box-shadow 0.2s ease;
}

.cm-wysiwym-image-widget-container:hover,
.cm-wysiwym-image-shortcode-container:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.cm-wysiwym-image-preview {
    display: block;
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    padding: 10px;
}

.cm-wysiwym-image-caption,
.cm-wysiwym-image-shortcode-container .shortcode-meta {
    font-family: inherit !important;
    font-size: 0.82em;
    color: #64748b;
    padding: 8px 16px;
    border-top: 1px solid #f1f5f9;
    background-color: #f8fafc;
    font-weight: 500;
}

.cm-wysiwym-image-shortcode-container .shortcode-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cm-wysiwym-image-shortcode-container .meta-badge {
    background-color: #cbd5e1;
    color: #334155;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.82em;
    text-transform: uppercase;
}

.cm-wysiwym-image-shortcode-container .meta-badge.tag-name {
    background-color: #dbeafe;
    color: #1e40af;
}

.cm-wysiwym-image-shortcode-container.align-left {
    margin: 0 auto 0 0 !important;
}
.cm-wysiwym-image-shortcode-container.align-right {
    margin: 0 0 0 auto !important;
}
.cm-wysiwym-image-shortcode-container.align-center {
    margin: 0 auto !important;
}
.cm-wysiwym-image-shortcode-container.align-fullbleed {
    width: 100% !important;
    margin: 0 !important;
}

.cm-wysiwym-image-shortcode-container.size-small {
    width: 150px;
}
.cm-wysiwym-image-shortcode-container.size-medium {
    width: 300px;
}
.cm-wysiwym-image-shortcode-container.size-large {
    width: 600px;
}
/* Legacy Plain Markdown Image Widget Styling */
.cm-editor .cm-wysiwym-image-widget-container {
    width: 300px !important;
    margin: 0 auto !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.cm-editor .cm-wysiwym-image-widget-container .cm-wysiwym-image-preview {
    padding: 0 !important;
}

.cm-editor .cm-wysiwym-image-widget-container:hover {
    box-shadow: none !important;
}

.cm-editor .cm-wysiwym-image-widget-container .cm-wysiwym-image-caption {
    border-top: none !important;
    background-color: transparent !important;
    text-align: center !important;
}

.cm-wysiwym-image-shortcode-container img {
    display: block;
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    padding: 6px;
}

.cm-wysiwym-image-shortcode-container.align-left img {
    max-height: 100px;
    margin-left: 0;
    margin-right: auto;
}

.cm-wysiwym-image-shortcode-container.align-right img {
    max-height: 100px;
    margin-right: 0;
    margin-left: auto;
}

/* Image Shortcode Styling Adjustments */
.cm-wysiwym-image-shortcode-container {
    position: relative;
    background-color: transparent !important;
    box-shadow: none !important;
    border-style: dashed !important;
}

.cm-wysiwym-image-shortcode-container:hover {
    box-shadow: none !important;
}

.cm-wysiwym-image-shortcode-container .shortcode-meta {
    background-color: transparent !important;
}

/* Edit icon on hover */
.cm-wysiwym-image-shortcode-container .image-edit-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #64748b;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        background-color 0.2s ease;
    z-index: 10;
}

.cm-wysiwym-image-shortcode-container:hover .image-edit-icon {
    opacity: 1;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-image-shortcode-container
    .image-edit-icon {
    background-color: rgba(30, 41, 59, 0.9) !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

/* Center & Fullbleed images custom styling */
.cm-wysiwym-image-shortcode-container.align-center,
.cm-wysiwym-image-shortcode-container.align-fullbleed {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.cm-wysiwym-image-shortcode-container.align-center:hover,
.cm-wysiwym-image-shortcode-container.align-fullbleed:hover {
    box-shadow: none !important;
}

.cm-wysiwym-image-shortcode-container.align-center .shortcode-meta,
.cm-wysiwym-image-shortcode-container.align-fullbleed .shortcode-meta {
    border-top: none !important;
    justify-content: center;
}

.cm-wysiwym-image-shortcode-container.align-center .meta-caption,
.cm-wysiwym-image-shortcode-container.align-fullbleed .meta-caption {
    width: 100%;
    text-align: center;
}

.cm-wysiwym-image-shortcode-container.align-center img,
.cm-wysiwym-image-shortcode-container.align-fullbleed img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
}

/* Video shortcode container styling */
.cm-wysiwym-video-shortcode-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0 !important;
    padding: 12px 0;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    background-color: #ffffff;
    position: relative;
}

.cm-wysiwym-video-shortcode-container .video-placeholder {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background-color: #f8fafc;
    border-radius: 8px;
    margin: 8px 16px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.cm-wysiwym-video-shortcode-container .video-placeholder:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.cm-wysiwym-video-shortcode-container .video-placeholder-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cm-wysiwym-video-shortcode-container .video-placeholder-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex-grow: 1;
}

.cm-wysiwym-video-shortcode-container .video-placeholder-platform {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95em;
}

.cm-wysiwym-video-shortcode-container .video-placeholder-url {
    font-size: 0.8em;
    color: #64748b;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-wysiwym-video-shortcode-container .shortcode-meta {
    font-family: inherit !important;
    font-size: 0.82em;
    color: #64748b;
    padding: 8px 16px;
    background-color: transparent !important;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Edit icon on hover */
.cm-wysiwym-video-shortcode-container .video-edit-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #64748b;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        background-color 0.2s ease;
    z-index: 10;
}

.cm-wysiwym-video-shortcode-container:hover .video-edit-icon {
    opacity: 1;
}

/* Layout Alignments */
.cm-wysiwym-video-shortcode-container.align-left {
    margin: 0 auto 0 0 !important;
}
.cm-wysiwym-video-shortcode-container.align-right {
    margin: 0 0 0 auto !important;
}
.cm-wysiwym-video-shortcode-container.align-center {
    margin: 0 auto !important;
}
.cm-wysiwym-video-shortcode-container.align-fullbleed {
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Sizes */
.cm-wysiwym-video-shortcode-container.size-small {
    width: 200px;
}
.cm-wysiwym-video-shortcode-container.size-medium {
    width: 350px;
}
.cm-wysiwym-video-shortcode-container.size-large {
    width: 500px;
}
.cm-wysiwym-video-shortcode-container.size-full {
    width: 100%;
}

/* Audio shortcode container styling */
.cm-wysiwym-audio-shortcode-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0 !important;
    padding: 12px 0;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    background-color: #ffffff;
    position: relative;
}

.cm-wysiwym-audio-shortcode-container .audio-placeholder {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    background-color: #f8fafc;
    border-radius: 8px;
    margin: 8px 16px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.cm-wysiwym-audio-shortcode-container .audio-placeholder:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.cm-wysiwym-audio-shortcode-container .audio-placeholder-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cm-wysiwym-audio-shortcode-container .audio-placeholder-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex-grow: 1;
}

.cm-wysiwym-audio-shortcode-container .audio-placeholder-platform {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95em;
}

.cm-wysiwym-audio-shortcode-container .audio-placeholder-url {
    font-size: 0.8em;
    color: #64748b;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cm-wysiwym-audio-shortcode-container .shortcode-meta {
    font-family: inherit !important;
    font-size: 0.82em;
    color: #64748b;
    padding: 8px 16px;
    background-color: transparent !important;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Edit icon on hover */
.cm-wysiwym-audio-shortcode-container .audio-edit-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #64748b;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        background-color 0.2s ease;
    z-index: 10;
}

.cm-wysiwym-audio-shortcode-container:hover .audio-edit-icon {
    opacity: 1;
}

/* Layout Alignments */
.cm-wysiwym-audio-shortcode-container.align-left {
    margin: 0 auto 0 0 !important;
}
.cm-wysiwym-audio-shortcode-container.align-right {
    margin: 0 0 0 auto !important;
}
.cm-wysiwym-audio-shortcode-container.align-center {
    margin: 0 auto !important;
}
.cm-wysiwym-audio-shortcode-container.align-fullbleed {
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Sizes */
.cm-wysiwym-audio-shortcode-container.size-small {
    width: 200px;
}
.cm-wysiwym-audio-shortcode-container.size-medium {
    width: 350px;
}
.cm-wysiwym-audio-shortcode-container.size-large {
    width: 500px;
}
.cm-wysiwym-audio-shortcode-container.size-full {
    width: 100%;
}

/* Optimistic uploading panel */
.cm-wysiwym-image-uploading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #f0fdf4;
    border: 1px dashed #22c55e;
    color: #15803d;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 500;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.05);
}

/* Links (inside markdown, when rendered optionally) */
.cm-wysiwym-link-anchor {
    color: #3b82f6 !important;
    text-decoration: underline;
    cursor: pointer;
}

.cm-wysiwym-link-anchor * {
    color: inherit !important;
}

/* Block-level Code Blocks - Neutral Slate */
.cm-editor .cm-wysiwym-codeblock-line {
    background-color: #f8fafc;
    font-family: "Fira Code", monospace !important;
    font-size: 0.88em;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.cm-editor .cm-wysiwym-codeblock-line-first {
    padding-top: 14px !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

.cm-editor .cm-wysiwym-codeblock-line-last {
    padding-bottom: 14px !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom: 1px solid #e2e8f0;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

/* Intermediate lines borders to form a complete container */
.cm-editor
    .cm-wysiwym-codeblock-line:not(.cm-wysiwym-codeblock-line-first):not(
        .cm-wysiwym-codeblock-line-last
    ) {
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

/* Caret color overrides for default light theme */
.cm-editor .cm-cursor {
    border-left-color: #0f172a !important; /* Slate 900 caret */
}
.cm-editor .cm-fat-cursor {
    background-color: #0f172a !important;
    opacity: 0.6 !important;
}

/* Syntax Highlighting for Default Light Theme */
.cm-editor .tok-markup,
.cm-editor .cmt-markup,
.cm-editor .tok-meta,
.cm-editor .cmt-meta,
.cm-editor .tok-punctuation,
.cm-editor .cmt-punctuation,
.cm-editor .tok-list,
.cm-editor .cmt-list {
    color: #1e293b !important; /* Dark Slate to match body text */
}

.cm-editor .tok-comment,
.cm-editor .cmt-comment {
    color: #64748b !important; /* Slate 500 comment text */
    font-style: italic;
}

.cm-editor .tok-keyword,
.cm-editor .cmt-keyword {
    color: #0f172a !important;
    font-weight: 600;
}

.cm-editor .tok-string,
.cm-editor .cmt-string {
    color: #1e293b !important;
}

.cm-editor .tok-number,
.cm-editor .cmt-number {
    color: #0f172a !important;
}

/* Bullet list marker styling */
.cm-wysiwym-bullet {
    color: #64748b; /* Slate 500 */
    font-weight: bold;
    margin-right: 0.35em;
    display: inline-block;
}

/* Table line styling (editing mode background tint) */
.cm-editor .cm-wysiwym-table-row {
    background-color: rgba(241, 245, 249, 0.45) !important;
    font-family: "Fira Code", monospace !important;
    font-size: 0.88em !important;
}

/* Table widget (rendered WYSIWYM table) */
.cm-wysiwym-table-widget {
    margin: 8px 0;
}

.cm-wysiwym-table-widget table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.cm-wysiwym-table-widget th,
.cm-wysiwym-table-widget td {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    text-align: left;
    cursor: text;
    height: 38px; /* Acts as min-height for table cells */
    box-sizing: border-box;
}

.cm-wysiwym-table-widget th {
    background-color: #f1f5f9;
    font-weight: 600;
    color: #0f172a;
}

.cm-wysiwym-table-widget tr:nth-child(even) {
    background-color: #f8fafc;
}

/* Scoped Dark Mode overrides */
.cm-editor.cm-wysiwym-dark {
    background-color: #0f172a !important; /* Deep Slate 900 */
    color: #e2e8f0 !important; /* Soft white/Slate 200 */
}

.cm-editor.cm-wysiwym-dark .cm-gutters {
    background-color: transparent !important;
    border-right: none !important;
    color: #64748b !important;
}

.cm-editor.cm-wysiwym-dark .cm-activeLine {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

.cm-editor.cm-wysiwym-dark .cm-activeLineGutter {
    background-color: transparent !important;
    color: #38bdf8 !important;
}

.cm-editor.cm-wysiwym-dark .cm-selectionBackground,
.cm-editor.cm-wysiwym-dark .cm-native-selection {
    background-color: rgba(56, 189, 248, 0.35) !important;
}

.cm-editor.cm-wysiwym-dark.cm-focused
    > .cm-scroller
    > .cm-selectionLayer
    .cm-selectionBackground {
    background-color: rgba(56, 189, 248, 0.6) !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-bold {
    color: #ffffff !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-italic {
    color: #cbd5e1 !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-strikethrough {
    color: #94a3b8 !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-highlight {
    background-color: rgba(250, 204, 21, 0.18);
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-inline-code {
    background-color: #1e293b;
    color: #38bdf8;
    border-color: #334155;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-h1,
.cm-editor.cm-wysiwym-dark .cm-wysiwym-h2,
.cm-editor.cm-wysiwym-dark .cm-wysiwym-h3,
.cm-editor.cm-wysiwym-dark .cm-wysiwym-h4,
.cm-editor.cm-wysiwym-dark .cm-wysiwym-h5,
.cm-editor.cm-wysiwym-dark .cm-wysiwym-h6 {
    color: #f8fafc !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-blockquote {
    border-left-color: #475569;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-blockquote,
.cm-editor.cm-wysiwym-dark .cm-wysiwym-blockquote * {
    color: #94a3b8 !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-frontmatter {
    background-color: #1e293b !important;
    border-left-color: #475569 !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-frontmatter,
.cm-editor.cm-wysiwym-dark .cm-wysiwym-frontmatter span {
    color: #94a3b8 !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-frontmatter-active {
    background-color: #1e293b !important;
    border-left-color: #38bdf8 !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-frontmatter-active,
.cm-editor.cm-wysiwym-dark .cm-wysiwym-frontmatter-active span {
    color: #e2e8f0 !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-hr-widget {
    border-top-color: #334155 !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-image-widget-container,
.cm-editor.cm-wysiwym-dark .cm-wysiwym-image-shortcode-container {
    border-color: #334155;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background-color: #0f172a;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-image-widget-container:hover,
.cm-editor.cm-wysiwym-dark .cm-wysiwym-image-shortcode-container:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-image-caption,
.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-image-shortcode-container
    .shortcode-meta {
    color: #94a3b8;
    border-top-color: #334155;
    background-color: #1e293b;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-image-shortcode-container .meta-badge {
    background-color: #334155;
    color: #cbd5e1;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-image-shortcode-container
    .meta-badge.tag-name {
    background-color: #1e3a8a;
    color: #93c5fd;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-image-uploading {
    background-color: rgba(21, 128, 61, 0.15);
    color: #4ade80;
}

/* Video dark mode overrides */
.cm-editor.cm-wysiwym-dark .cm-wysiwym-video-shortcode-container {
    border-color: #334155;
    background-color: #0f172a;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-video-shortcode-container
    .video-placeholder {
    background-color: #1e293b;
    border-color: #334155;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-video-shortcode-container
    .video-placeholder:hover {
    background-color: #334155;
    border-color: #475569;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-video-shortcode-container
    .video-placeholder-icon-wrap {
    background-color: #0f172a;
    color: #94a3b8;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-video-shortcode-container
    .video-placeholder-platform {
    color: #f8fafc;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-video-shortcode-container
    .video-placeholder-url {
    color: #94a3b8;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-video-shortcode-container
    .video-edit-icon {
    background-color: rgba(30, 41, 59, 0.9) !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

/* Audio dark mode overrides */
.cm-editor.cm-wysiwym-dark .cm-wysiwym-audio-shortcode-container {
    border-color: #334155;
    background-color: #0f172a;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-audio-shortcode-container
    .audio-placeholder {
    background-color: #1e293b;
    border-color: #334155;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-audio-shortcode-container
    .audio-placeholder:hover {
    background-color: #334155;
    border-color: #475569;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-audio-shortcode-container
    .audio-placeholder-icon-wrap {
    background-color: #0f172a;
    color: #94a3b8;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-audio-shortcode-container
    .audio-placeholder-platform {
    color: #f8fafc;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-audio-shortcode-container
    .audio-placeholder-url {
    color: #94a3b8;
}

.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-audio-shortcode-container
    .audio-edit-icon {
    background-color: rgba(30, 41, 59, 0.9) !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-link-anchor {
    color: #3b82f6 !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-bullet {
    color: #38bdf8 !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-table-row {
    background-color: rgba(30, 41, 59, 0.45) !important;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-table-widget table {
    border-color: #334155;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-table-widget th,
.cm-editor.cm-wysiwym-dark .cm-wysiwym-table-widget td {
    border-color: #334155;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-table-widget th {
    background-color: #1e293b;
    color: #f8fafc;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-table-widget tr:nth-child(even) {
    background-color: rgba(30, 41, 59, 0.3);
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-codeblock-line {
    background-color: #1e293b;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-codeblock-line-first,
.cm-editor.cm-wysiwym-dark .cm-wysiwym-codeblock-line-last,
.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-codeblock-line:not(.cm-wysiwym-codeblock-line-first):not(
        .cm-wysiwym-codeblock-line-last
    ) {
    border-color: #334155 !important;
}

.cm-editor.cm-wysiwym-dark .cm-cursor {
    border-left-color: #38bdf8 !important;
}
.cm-editor.cm-wysiwym-dark .cm-fat-cursor {
    background-color: #38bdf8 !important;
}

/* Syntax Highlighting for Dark Mode */
.cm-editor.cm-wysiwym-dark .tok-markup,
.cm-editor.cm-wysiwym-dark .cmt-markup,
.cm-editor.cm-wysiwym-dark .tok-meta,
.cm-editor.cm-wysiwym-dark .cmt-meta,
.cm-editor.cm-wysiwym-dark .tok-punctuation,
.cm-editor.cm-wysiwym-dark .cmt-punctuation,
.cm-editor.cm-wysiwym-dark .tok-list,
.cm-editor.cm-wysiwym-dark .cmt-list {
    color: #ffffff !important;
}

.cm-editor.cm-wysiwym-dark .tok-comment,
.cm-editor.cm-wysiwym-dark .cmt-comment {
    color: #64748b !important;
    font-style: italic;
}

.cm-editor.cm-wysiwym-dark .tok-keyword,
.cm-editor.cm-wysiwym-dark .cmt-keyword {
    color: #fb923c !important;
}

.cm-editor.cm-wysiwym-dark .tok-string,
.cm-editor.cm-wysiwym-dark .cmt-string {
    color: #4ade80 !important;
}

.cm-editor.cm-wysiwym-dark .tok-number,
.cm-editor.cm-wysiwym-dark .cmt-number,
.cm-editor.cm-wysiwym-dark .tok-boolean,
.cm-editor.cm-wysiwym-dark .cmt-boolean {
    color: #a78bfa !important;
}

.cm-editor.cm-wysiwym-dark .tok-variableName,
.cm-editor.cm-wysiwym-dark .cmt-variableName {
    color: #f8fafc !important;
}

.cm-editor.cm-wysiwym-dark .tok-propertyName,
.cm-editor.cm-wysiwym-dark .cmt-propertyName {
    color: #38bdf8 !important;
}

.cm-editor.cm-wysiwym-dark .tok-operator,
.cm-editor.cm-wysiwym-dark .cmt-operator {
    color: #cbd5e1 !important;
}

.cm-editor.cm-wysiwym-dark .tok-url,
.cm-editor.cm-wysiwym-dark .cmt-url,
.cm-editor.cm-wysiwym-dark .tok-link,
.cm-editor.cm-wysiwym-dark .cmt-link {
    color: #38bdf8 !important;
}

/* Scrollbars overrides for dark mode */
.cm-editor.cm-wysiwym-dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.cm-editor.cm-wysiwym-dark ::-webkit-scrollbar-track {
    background: #0f172a;
}
.cm-editor.cm-wysiwym-dark ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 5px;
}
.cm-editor.cm-wysiwym-dark ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* --- HTML Preview Styles (Default Skin synchronization) --- */
.traven-preview {
    background-color: #ffffff;
    color: #0f172a;
    font-family: "Atkinson Hyperlegible Next", sans-serif !important;
}
.traven-preview h1,
.traven-preview h2,
.traven-preview h3,
.traven-preview h4,
.traven-preview h5,
.traven-preview h6 {
    font-family: "Atkinson Hyperlegible Next", sans-serif !important;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-top: 24px;
    margin-bottom: 12px;
    line-height: 1.25;
}
.traven-preview h1 {
    font-size: 2em;
    font-weight: 800;
}
.traven-preview h2 {
    font-size: 1.6em;
    font-weight: 700;
}
.traven-preview h3 {
    font-size: 1.35em;
    font-weight: 700;
}
.traven-preview h4 {
    font-size: 1.15em;
    font-weight: 700;
}
.traven-preview h5,
.traven-preview h6 {
    font-size: 1em;
    font-weight: 700;
}

.traven-preview p {
    margin-top: 0;
    margin-bottom: 16px;
    line-height: 1.75;
}
.traven-preview blockquote:not(.traven-component-pullquote) {
    border-left: 3px solid #cbd5e1;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
}

/* First line of a blockquote block gets padding-top */
.traven-preview blockquote:not(.traven-component-pullquote) {
    padding-top: 10px !important;
}

/* Subsequent consecutive blockquotes should not have top padding */
.traven-preview
    blockquote:not(.traven-component-pullquote)
    + blockquote:not(.traven-component-pullquote) {
    padding-top: 2px !important;
}

/* Last line of a blockquote block gets padding-bottom */
.traven-preview
    blockquote:not(.traven-component-pullquote):not(
        :has(+ blockquote:not(.traven-component-pullquote))
    ) {
    padding-bottom: 10px !important;
}

.traven-preview blockquote:not(.traven-component-pullquote),
.traven-preview blockquote:not(.traven-component-pullquote) * {
    font-style: italic;
    color: #475569;
    line-height: 1.5 !important;
    font-family:
        "Atkinson Hyperlegible Next",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif !important;
}

.traven-preview blockquote:not(.traven-component-pullquote) p:last-child {
    margin-bottom: 0 !important;
}

/* Reduce spacing around blockquotes in HTML Preview to match editor */
.traven-preview p:has(+ blockquote:not(.traven-component-pullquote)),
.traven-preview ul:has(+ blockquote:not(.traven-component-pullquote)),
.traven-preview ol:has(+ blockquote:not(.traven-component-pullquote)),
.traven-preview pre:has(+ blockquote:not(.traven-component-pullquote)),
.traven-preview table:has(+ blockquote:not(.traven-component-pullquote)) {
    margin-bottom: 0.6em !important;
}

.traven-preview blockquote:not(.traven-component-pullquote) + p,
.traven-preview blockquote:not(.traven-component-pullquote) + ul,
.traven-preview blockquote:not(.traven-component-pullquote) + ol,
.traven-preview blockquote:not(.traven-component-pullquote) + pre,
.traven-preview blockquote:not(.traven-component-pullquote) + table {
    margin-top: 0.6em !important;
}
.traven-preview ul,
.traven-preview ol {
    padding-left: 24px;
    margin-top: 0;
    margin-bottom: 16px;
}
.traven-preview li {
    margin-bottom: 4px;
}
.traven-preview code {
    font-family: "Fira Code", monospace !important;
    font-size: 0.88em;
    background-color: #f1f5f9;
    color: #0f172a;
    padding: 3px 6px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}
.traven-preview pre {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 20px;
    overflow-x: auto;
    margin: 16px 0;
}
.traven-preview pre code {
    background-color: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    font-size: 1em;
    color: inherit;
}
.traven-preview a {
    color: #3b82f6;
    text-decoration: underline;
}
.traven-preview a:hover {
    text-decoration: none;
}

/* Image shortcode compiled HTML styles in preview */
.traven-preview img.traven-image-shortcode,
.traven-preview figure.traven-image-figure {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 12px auto;
    display: block;
}

.traven-preview img.traven-image-shortcode.align-left,
.traven-preview figure.traven-image-figure.align-left {
    float: left;
    margin: 12px 16px 12px 0;
}

.traven-preview img.traven-image-shortcode.align-right,
.traven-preview figure.traven-image-figure.align-right {
    float: right;
    margin: 12px 0 12px 16px;
}

.traven-preview img.traven-image-shortcode.align-center,
.traven-preview figure.traven-image-figure.align-center {
    margin: 12px auto;
    display: block;
}

.traven-preview img.traven-image-shortcode.align-fullbleed,
.traven-preview figure.traven-image-figure.align-fullbleed {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    border-radius: 0 !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    height: auto !important;
}

.traven-preview img.traven-image-shortcode.size-small,
.traven-preview figure.traven-image-figure.size-small {
    width: 150px;
}

.traven-preview img.traven-image-shortcode.size-medium,
.traven-preview figure.traven-image-figure.size-medium {
    width: 300px;
}

.traven-preview img.traven-image-shortcode.size-large,
.traven-preview figure.traven-image-figure.size-large {
    width: 600px;
}

.traven-preview img.traven-image-shortcode.size-full,
.traven-preview figure.traven-image-figure.size-full {
    width: 100%;
}

.traven-preview figure.traven-image-figure img.traven-image-shortcode {
    width: 100%;
    max-width: 100%;
    margin: 0;
    display: block;
}

.traven-preview figure.traven-image-figure figcaption.traven-image-caption {
    font-family: inherit !important;
    font-size: 0.82em;
    color: #64748b;
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

/* Video preview styles */
.traven-preview .traven-video-container,
.traven-preview figure.traven-video-figure {
    max-width: 100%;
    border-radius: 6px;
    margin: 12px auto;
    display: block;
}

.traven-preview .traven-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background-color: #000000;
}

.traven-preview .traven-video-container iframe,
.traven-preview .traven-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 6px;
}

.traven-preview .traven-video-container.align-left,
.traven-preview figure.traven-video-figure.align-left {
    float: left;
    margin: 12px 16px 12px 0;
}

.traven-preview .traven-video-container.align-right,
.traven-preview figure.traven-video-figure.align-right {
    float: right;
    margin: 12px 0 12px 16px;
}

.traven-preview .traven-video-container.align-center,
.traven-preview figure.traven-video-figure.align-center {
    margin: 12px auto;
    display: block;
}

.traven-preview .traven-video-container.align-fullbleed,
.traven-preview figure.traven-video-figure.align-fullbleed {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    border-radius: 0 !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    height: auto !important;
    padding-bottom: calc(100vw * 9 / 16) !important;
}

.traven-preview .traven-video-container.align-fullbleed iframe,
.traven-preview .traven-video-container.align-fullbleed video {
    border-radius: 0 !important;
}

.traven-preview .traven-video-container.size-small,
.traven-preview figure.traven-video-figure.size-small {
    width: 200px;
}

.traven-preview .traven-video-container.size-medium,
.traven-preview figure.traven-video-figure.size-medium {
    width: 350px;
}

.traven-preview .traven-video-container.size-large,
.traven-preview figure.traven-video-figure.size-large {
    width: 500px;
}

.traven-preview .traven-video-container.size-full,
.traven-preview figure.traven-video-figure.size-full {
    width: 100%;
}

.traven-preview figure.traven-video-figure .traven-video-container {
    margin: 0;
}

.traven-preview figure.traven-video-figure figcaption.traven-video-caption {
    font-family: inherit !important;
    font-size: 0.82em;
    color: #64748b;
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

/* Audio preview styles */
.traven-preview .traven-audio-container,
.traven-preview figure.traven-audio-figure {
    max-width: 100%;
    border-radius: 6px;
    margin: 12px auto;
    display: block;
}

.traven-preview .traven-audio-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    background-color: transparent;
}

.traven-preview .traven-audio-container audio {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 6px;
}

.traven-preview .traven-audio-container.align-left,
.traven-preview figure.traven-audio-figure.align-left {
    float: left;
    margin: 12px 16px 12px 0;
}

.traven-preview .traven-audio-container.align-right,
.traven-preview figure.traven-audio-figure.align-right {
    float: right;
    margin: 12px 0 12px 16px;
}

.traven-preview .traven-audio-container.align-center,
.traven-preview figure.traven-audio-figure.align-center {
    margin: 12px auto;
    display: block;
}

.traven-preview .traven-audio-container.align-fullbleed,
.traven-preview figure.traven-audio-figure.align-fullbleed {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    border-radius: 0 !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    height: auto !important;
}

.traven-preview .traven-audio-container.align-fullbleed audio {
    border-radius: 0 !important;
}

.traven-preview .traven-audio-container.size-small,
.traven-preview figure.traven-audio-figure.size-small {
    width: 200px;
}

.traven-preview .traven-audio-container.size-medium,
.traven-preview figure.traven-audio-figure.size-medium {
    width: 350px;
}

.traven-preview .traven-audio-container.size-large,
.traven-preview figure.traven-audio-figure.size-large {
    width: 500px;
}

.traven-preview .traven-audio-container.size-full,
.traven-preview figure.traven-audio-figure.size-full {
    width: 100%;
}

.traven-preview figure.traven-audio-figure .traven-audio-container {
    margin: 0;
}

.traven-preview figure.traven-audio-figure figcaption.traven-audio-caption {
    font-family: inherit !important;
    font-size: 0.82em;
    color: #64748b;
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

.traven-preview mark {
    background-color: rgba(250, 204, 21, 0.3);
    border-radius: 3px;
    padding: 1px 4px;
}
.traven-preview hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 24px 0;
}
.traven-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 0.92em;
}
.traven-preview th,
.traven-preview td {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    text-align: left;
    height: 38px; /* Acts as min-height for table cells */
    box-sizing: border-box;
}
.traven-preview th {
    background-color: #f8fafc;
    font-weight: 600;
    color: #0f172a;
}
.traven-preview tr:nth-child(even) {
    background-color: #fdfdfd;
}

/* Dark mode overrides for default skin preview */
.traven-preview.cm-wysiwym-dark {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}
.traven-preview.cm-wysiwym-dark h1,
.traven-preview.cm-wysiwym-dark h2,
.traven-preview.cm-wysiwym-dark h3,
.traven-preview.cm-wysiwym-dark h4,
.traven-preview.cm-wysiwym-dark h5,
.traven-preview.cm-wysiwym-dark h6 {
    color: #f8fafc;
}
.traven-preview.cm-wysiwym-dark blockquote {
    border-left-color: #475569;
    color: #94a3b8;
}
.traven-preview.cm-wysiwym-dark code {
    background-color: #1e293b;
    border-color: #334155;
    color: #38bdf8;
}
.traven-preview.cm-wysiwym-dark pre {
    background-color: #1e293b;
    border-color: #334155;
}
.traven-preview.cm-wysiwym-dark a {
    color: #38bdf8;
}

.traven-preview.cm-wysiwym-dark mark {
    background-color: rgba(250, 204, 21, 0.2);
    color: #f8fafc;
}
.traven-preview.cm-wysiwym-dark hr {
    border-top-color: #334155;
}

.traven-preview.cm-wysiwym-dark table th,
.traven-preview.cm-wysiwym-dark table td {
    border-color: #334155;
}
.traven-preview.cm-wysiwym-dark table th {
    background-color: #1e293b;
    color: #f8fafc;
}
.traven-preview.cm-wysiwym-dark table tr:nth-child(even) {
    background-color: rgba(30, 41, 59, 0.2);
}

.traven-preview.cm-wysiwym-dark
    figure.traven-image-figure
    figcaption.traven-image-caption {
    color: #94a3b8;
}

/* WYSIWYM Component Shortcodes */
.cm-wysiwym-component-shortcode {
    position: relative;
    margin: 0 !important;
    padding: 28px 16px !important;
    border-left: 4px solid #cbd5e1;
    background-color: #f8fafc;
    color: #334155;
}
.cm-wysiwym-component-shortcode .component-body p {
    margin: 8px 0;
    line-height: 1.6;
}
.cm-wysiwym-component-shortcode .component-body p:first-child {
    margin-top: 0;
}
.cm-wysiwym-component-shortcode .component-body p:last-child {
    margin-bottom: 0;
}
.cm-wysiwym-component-shortcode cite {
    display: block;
    margin-top: 8px;
    font-size: 0.88em;
    font-style: italic;
    color: #64748b;
}

.cm-wysiwym-component-shortcode.component-pullquote {
    border-left: none !important;
    border-top: 2px solid #cbd5e1 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    padding: 24px 16px !important;
    margin: 0 auto !important;
    max-width: 80% !important;
    font-size: 1.2em !important;
    font-weight: bold;
    text-align: center;
    color: #0f172a;
    background-color: transparent !important;
    line-height: 1.5 !important;
}
.cm-wysiwym-component-shortcode.component-pullquote,
.cm-wysiwym-component-shortcode.component-pullquote * {
    line-height: 1.5 !important;
    font-style: normal !important;
    text-align: center !important;
  color: #0f172a !important;
  font-family: "Atkinson Hyperlegible Next", sans-serif !important;
}
.cm-wysiwym-component-shortcode.component-pullquote blockquote {
    margin: 0 !important;
    padding: 0 !important;
}

.cm-wysiwym-component-shortcode.component-blockquote {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cm-wysiwym-component-shortcode.component-blockquote blockquote {
    border-left: 3px solid #cbd5e1 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
    font-style: italic;
    color: #475569;
}
.cm-wysiwym-component-shortcode.component-blockquote blockquote,
.cm-wysiwym-component-shortcode.component-blockquote blockquote * {
    line-height: 1.5 !important;
    font-family:
        "Atkinson Hyperlegible Next",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif !important;
}
.cm-wysiwym-component-shortcode.component-blockquote cite {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
    color: #64748b;
    font-style: normal;
    text-align: right;
}

/* Reduce blank line spacing immediately before and after blockquote components */
.cm-editor
    .cm-wysiwym-component-shortcode.component-blockquote
    + .cm-line:has(br:only-child),
.cm-editor
    .cm-line:has(br:only-child):has(
        + .cm-wysiwym-component-shortcode.component-blockquote
    ) {
    height: 0.6em !important;
    min-height: 0.6em !important;
}

.cm-wysiwym-component-shortcode.component-info {
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #3b82f6 !important;
    border-radius: 8px !important;
    background-color: #f8fafc !important;
    color: #334155 !important;
    padding: 16px !important;
    margin: 0 !important;
}
.cm-wysiwym-component-shortcode.component-info,
.cm-wysiwym-component-shortcode.component-info * {
    font-family:
        "Atkinson Hyperlegible Next",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif !important;
}
.cm-wysiwym-component-shortcode.component-info .component-body p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
.cm-wysiwym-component-shortcode.component-info
    .component-body
    p:not(:last-child) {
    margin-bottom: 8px !important;
}

.cm-wysiwym-component-shortcode.component-warning {
    border: 1px solid #fef08a !important;
    border-left: 4px solid #eab308 !important;
    border-radius: 8px !important;
    background-color: rgba(250, 204, 21, 0.1) !important;
    color: #334155 !important;
    padding: 16px !important;
    margin: 0 !important;
}
.cm-wysiwym-component-shortcode.component-warning,
.cm-wysiwym-component-warning * {
    font-family:
        "Atkinson Hyperlegible Next",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif !important;
}
.cm-wysiwym-component-shortcode.component-warning .component-body p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: bold !important;
    margin: 0 !important;
}
.cm-wysiwym-component-shortcode.component-warning
    .component-body
    p:not(:last-child) {
    margin-bottom: 8px !important;
}

/* Edit icon on hover for Component Shortcodes */
.cm-wysiwym-component-shortcode .image-edit-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #64748b;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        background-color 0.2s ease;
    z-index: 10;
}
.cm-wysiwym-component-shortcode:hover .image-edit-icon {
    opacity: 1;
}

/* Fallback Preview Block Component Styles */
.traven-preview .traven-component-blockquote {
    border-left: 3px solid #cbd5e1 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
    font-style: italic;
    color: #475569;
}
.traven-preview .traven-component-blockquote,
.traven-preview .traven-component-blockquote * {
    line-height: 1.5 !important;
    font-family:
        "Atkinson Hyperlegible Next",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif !important;
}
.traven-preview .traven-component-blockquote p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.traven-preview .traven-component-blockquote p:not(:last-of-type) {
    margin-bottom: 8px !important;
}
.traven-preview .traven-component-blockquote footer {
    margin-top: 4px;
    text-align: right;
}
.traven-preview .traven-component-blockquote cite {
    display: block;
    font-size: 0.85em;
    color: #64748b;
    font-style: normal;
}

/* Reduce spacing around blockquote components in HTML Preview to match editor */
.traven-preview p:has(+ .traven-component-blockquote),
.traven-preview ul:has(+ .traven-component-blockquote),
.traven-preview ol:has(+ .traven-component-blockquote),
.traven-preview pre:has(+ .traven-component-blockquote),
.traven-preview table:has(+ .traven-component-blockquote) {
    margin-bottom: 0.6em !important;
}
.traven-preview .traven-component-blockquote + p,
.traven-preview .traven-component-blockquote + ul,
.traven-preview .traven-component-blockquote + ol,
.traven-preview .traven-component-blockquote + pre,
.traven-preview .traven-component-blockquote + table {
    margin-top: 0.6em !important;
}

.traven-preview .traven-component-pullquote {
    border-top: 2px solid #cbd5e1 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    padding: 24px 0 !important;
    margin: 24px auto !important;
    max-width: 80% !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    font-style: normal !important;
    text-align: center;
    color: #0f172a;
    background-color: transparent !important;
    line-height: 1.5 !important;
}
.traven-preview .traven-component-pullquote,
.traven-preview .traven-component-pullquote * {
    line-height: 1.5 !important;
    font-style: normal !important;
    font-weight: bold !important;
    text-align: center !important;
  color: #0f172a !important;
  font-family: "Atkinson Hyperlegible Next", sans-serif !important;
}
.traven-preview .traven-component-pullquote p {
    margin: 0 !important;
}

.traven-preview .traven-component {
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    padding: 16px;
    border-radius: 8px;
    margin: 16px 0;
}
.traven-preview .traven-component-info {
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #3b82f6 !important;
    border-radius: 8px !important;
    background-color: #f8fafc !important;
    color: #334155 !important;
    padding: 16px !important;
    margin: 16px 0 !important;
}
.traven-preview .traven-component-info,
.traven-preview .traven-component-info * {
    font-family:
        "Atkinson Hyperlegible Next",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif !important;
}
.traven-preview .traven-component-info p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
.traven-preview .traven-component-info p:not(:last-child) {
    margin-bottom: 8px !important;
}

.traven-preview .traven-component-warning {
    border: 1px solid #fef08a !important;
    border-left: 4px solid #eab308 !important;
    border-radius: 8px !important;
    background-color: rgba(250, 204, 21, 0.1) !important;
    color: #334155 !important;
    padding: 16px !important;
    margin: 16px 0 !important;
}
.traven-preview .traven-component-warning,
.traven-preview .traven-component-warning * {
    font-family:
        "Atkinson Hyperlegible Next",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif !important;
}
.traven-preview .traven-component-warning p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: bold !important;
    margin: 0 !important;
}
.traven-preview .traven-component-warning p:not(:last-child) {
    margin-bottom: 8px !important;
}

/* Dark Mode overrides for WYSIWYM Component Shortcodes */
.cm-editor.cm-wysiwym-dark .cm-wysiwym-component-shortcode {
    border-left-color: #475569 !important;
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
}
.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-component-shortcode.component-blockquote
    blockquote {
    border-left-color: #475569 !important;
    color: #cbd5e1 !important;
}
.cm-editor.cm-wysiwym-dark
    .cm-wysiwym-component-shortcode.component-blockquote
    cite {
    color: #94a3b8 !important;
}
.cm-editor.cm-wysiwym-dark .cm-wysiwym-component-shortcode.component-pullquote {
    border-top-color: #475569 !important;
    border-bottom-color: #475569 !important;
    color: #f8fafc !important;
}
.cm-editor.cm-wysiwym-dark .cm-wysiwym-component-shortcode.component-info {
    border-color: #334155 !important;
    background-color: #1e293b !important;
    border-left-color: #38bdf8 !important;
    color: #cbd5e1 !important;
}
.cm-editor.cm-wysiwym-dark .cm-wysiwym-component-shortcode.component-warning {
    border-color: #334155 !important;
    background-color: rgba(250, 204, 21, 0.15) !important;
    border-left-color: #fbbf24 !important;
    color: #cbd5e1 !important;
}
.cm-editor.cm-wysiwym-dark .cm-wysiwym-component-shortcode cite {
    color: #94a3b8 !important;
}
.cm-editor.cm-wysiwym-dark .cm-wysiwym-component-shortcode .image-edit-icon {
    background-color: rgba(30, 41, 59, 0.9) !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

/* Dark Mode overrides for Preview Component Shortcodes */
.traven-preview.cm-wysiwym-dark .traven-component-blockquote {
    border-left-color: #475569 !important;
    color: #cbd5e1 !important;
}
.traven-preview.cm-wysiwym-dark .traven-component-blockquote cite {
    color: #a8a29e !important;
}
.traven-preview.cm-wysiwym-dark .traven-component-pullquote,
.traven-preview.cm-wysiwym-dark .traven-component-pullquote * {
    border-top-color: #475569 !important;
    border-bottom-color: #475569 !important;
    color: #f8fafc !important;
}
.traven-preview.cm-wysiwym-dark .traven-component-info {
    border-color: #334155 !important;
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-left-color: #38bdf8 !important;
}
.traven-preview.cm-wysiwym-dark .traven-component-warning {
    border-color: #334155 !important;
    background-color: rgba(250, 204, 21, 0.15) !important;
    color: #cbd5e1 !important;
    border-left-color: #fbbf24 !important;
}
.traven-preview.cm-wysiwym-dark .traven-component {
    border-color: #334155 !important;
    background-color: #1e293b !important;
}

/* --- Figure Shortcode WYSIWYM Styles --- */
.cm-wysiwym-figure-shortcode {
    position: relative;
    display: block;
    padding: 16px;
    background-color: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    box-sizing: border-box;
}

.cm-wysiwym-figure-shortcode .component-body {
    margin: 0;
    padding: 0;
    width: 100%;
}

.cm-wysiwym-figure-shortcode .component-body p {
    margin: 0 0 10px 0;
    line-height: 1.6;
}

.cm-wysiwym-figure-shortcode .component-body p:last-child {
    margin-bottom: 0;
}

.cm-wysiwym-figure-shortcode .figure-caption {
    font-family: inherit !important;
    font-size: 0.85em;
    color: #64748b;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    font-weight: 500;
}

/* Edit icon overlay */
.cm-wysiwym-figure-shortcode .figure-edit-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.2s ease,
        background-color 0.2s ease;
    z-index: 10;
    cursor: pointer;
}

.cm-wysiwym-figure-shortcode:hover .figure-edit-icon {
    opacity: 1;
    pointer-events: auto;
}

/* Layout Alignments (Editor) */
.cm-wysiwym-figure-shortcode.align-left {
    margin: 0 auto 0 0 !important;
}
.cm-wysiwym-figure-shortcode.align-right {
    margin: 0 0 0 auto !important;
}
.cm-wysiwym-figure-shortcode.align-center {
    margin: 0 auto !important;
}
.cm-wysiwym-figure-shortcode.align-fullbleed {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Sizes (Editor) */
.cm-wysiwym-figure-shortcode.size-small {
    width: 250px;
}
.cm-wysiwym-figure-shortcode.size-medium {
    width: 450px;
}
.cm-wysiwym-figure-shortcode.size-large {
    width: 650px;
}
.cm-wysiwym-figure-shortcode.size-full {
    width: 100%;
}

/* Dark Mode WYSIWYM overrides */
.cm-editor.cm-wysiwym-dark .cm-wysiwym-figure-shortcode {
    background-color: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-figure-shortcode .figure-caption {
    border-top-color: #334155;
    color: #94a3b8;
}

.cm-editor.cm-wysiwym-dark .cm-wysiwym-figure-shortcode .figure-edit-icon {
    background-color: rgba(30, 41, 59, 0.9) !important;
    border-color: #475569 !important;
    color: #94a3b8 !important;
}

/* --- Figure Shortcode HTML Preview Styles --- */
.traven-preview .traven-figure {
    margin: 24px auto;
    padding: 16px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-sizing: border-box;
}

.traven-preview .traven-figure-caption {
    font-size: 0.88em;
    color: #64748b;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    font-weight: 500;
}

/* Layout Alignments (Preview) */
.traven-preview .traven-figure.align-left {
    margin: 12px auto 12px 0;
}
.traven-preview .traven-figure.align-left.size-small,
.traven-preview .traven-figure.align-left.size-medium {
    float: left;
    margin: 12px 16px 12px 0;
}
.traven-preview .traven-figure.align-right {
    margin: 12px 0 12px auto;
}
.traven-preview .traven-figure.align-right.size-small,
.traven-preview .traven-figure.align-right.size-medium {
    float: right;
    margin: 12px 0 12px 16px;
}
.traven-preview .traven-figure.align-center {
    margin: 24px auto;
}
.traven-preview .traven-figure.align-fullbleed {
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

/* Sizes (Preview) */
.traven-preview .traven-figure.size-small {
    width: 250px;
}
.traven-preview .traven-figure.size-medium {
    width: 450px;
}
.traven-preview .traven-figure.size-large {
    width: 650px;
}
.traven-preview .traven-figure.size-full {
    width: 100%;
}

/* Preview Dark Mode overrides */
.traven-preview.cm-wysiwym-dark .traven-figure {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

.traven-preview.cm-wysiwym-dark .traven-figure-caption {
    border-top-color: #334155 !important;
    color: #94a3b8 !important;
}

/* Component Headers (both preview and editor) */
.traven-component-header,
.cm-wysiwym-component-shortcode .component-header {
    font-family: var(--traven-sans-font, sans-serif);
    font-weight: 700;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    user-select: none;
}

/* Collapsible (Details/Summary) Styling */
summary.traven-component-header,
summary.component-header {
    cursor: pointer;
    outline: none;
    list-style: none;
}

summary.traven-component-header::-webkit-details-marker,
summary.component-header::-webkit-details-marker {
    display: none;
}

/* Custom expand/collapse indicator arrow */
summary.traven-component-header::after,
summary.component-header::after {
    content: "▼";
    font-size: 0.75em;
    margin-left: 8px;
    transition: transform 0.2s ease;
    opacity: 0.7;
    display: inline-block;
}

details[open] summary.traven-component-header::after,
details[open] summary.component-header::after {
    transform: rotate(-180deg);
}

/* Remove bottom margin on headers when the collapsible box is closed to center the title vertically */
details:not([open]) .traven-component-header,
details:not([open]) .component-header {
    margin-bottom: 0 !important;
}


/* Ensure shortcode containers cascade the body typeface to their child elements */
.cm-wysiwym-image-shortcode-container,
.cm-wysiwym-video-shortcode-container,
.cm-wysiwym-audio-shortcode-container,
.cm-wysiwym-figure-shortcode,
.traven-preview figure.traven-image-figure,
.traven-preview figure.traven-video-figure,
.traven-preview figure.traven-audio-figure,
.traven-preview .traven-figure {
  font-family: inherit !important;
}