/* ============================================================
   bsw-article.css — BeSecureWise  v2
   Article render styles + Quill editor skin.
   Imports after components.css.

   v2 changes vs v1
   ─────────────────
   • Single authoritative .article-body block (removed duplicate
     from components.css section 15 which was overriding this file)
   • Added explicit color: var(--text-primary) on .article-body h2
     (was missing — the teal pseudo-bar appeared but text was wrong color)
   • Added .article-body > p:first-of-type specificity guard for
     .ql-size-huge so Quill font-size spans override the lead-paragraph
     enlargement correctly
   • .article-body a[href^="http"] changed from display:inline-block pill
     (components.css v1 style) to the ↗ suffix style only — pill style
     was breaking inline link flow inside paragraphs
   • .doc / .doc-content base styles kept only in components.css for the
     doc-viewer feature; no longer mixed with article-body here
============================================================ */


/* ─── ARTICLE BODY BASE ──────────────────────────────────────────────────── */

.article-body,
.prose {
    max-width: 760px;
    margin: 0 auto;
    line-height: 1.82;
    font-size: 1.06rem;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    text-wrap: pretty;
}


/* ─── TYPOGRAPHY ─────────────────────────────────────────────────────────── */

.article-body h1 {
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.4px;
    margin: 0 0 0.35em;
}

.article-body h1::after {
    content: '';
    display: block;
    width: 52px;
    height: 3px;
    background: linear-gradient(90deg, #00BFA5, transparent);
    margin-top: 0.55em;
    border-radius: 2px;
}

.article-body h2 {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-primary);
    /* explicit — was missing in v1 */
    margin: 2.6em 0 0.5em;
    padding-top: 0.1em;
    letter-spacing: -0.2px;
    position: relative;
}

.article-body h2::before {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    background: #00BFA5;
    border-radius: 2px;
    margin-bottom: 0.55em;
}

.article-body h2::after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    margin-top: 0.7em;
    background: linear-gradient(90deg, rgba(148, 163, 184, .2), transparent);
}

.article-body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #dbe7ff;
    margin: 1.9em 0 0.4em;
    letter-spacing: 0.1px;
}

.article-body h3+p {
    margin-top: 0.3rem;
}

.article-body p {
    margin: 0 0 1.3em;
    color: var(--text-secondary);
}

/* First paragraph lead — slightly larger */
.article-body>p:first-of-type {
    font-size: 1.16rem;
    color: var(--text-primary);
    line-height: 1.75;
}

/* Quill font-size spans must override the lead enlargement above.
   .article-body > p:first-of-type has specificity (0,2,1);
   .article-body .ql-size-* has (0,2,0) — add the p to win. */
.article-body p .ql-size-small {
    font-size: 0.875rem;
}

.article-body p .ql-size-large {
    font-size: 1.35rem;
}

.article-body p .ql-size-huge {
    font-size: 2rem;
}


/* ─── LISTS ──────────────────────────────────────────────────────────────── */

.article-body ul,
.article-body ol {
    padding-left: 0;
    margin: 0 0 1.4em;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.article-body li {
    background: rgba(148, 163, 184, .05);
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 8px;
    padding: 0.72rem 1rem 0.72rem 2.2rem;
    position: relative;
    line-height: 1.65;
    font-size: 0.97rem;
}

.article-body ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #00BFA5;
    border-radius: 50%;
    position: absolute;
    left: 0.85rem;
    top: 1.05rem;
}

.article-body ol {
    counter-reset: bsw-counter;
}

.article-body ol li {
    counter-increment: bsw-counter;
}

.article-body ol li::before {
    content: counter(bsw-counter);
    position: absolute;
    left: 0.7rem;
    top: 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #00BFA5;
    background: rgba(0, 191, 165, .12);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}


/* ─── LINKS ──────────────────────────────────────────────────────────────── */

.article-body a {
    color: var(--sky-300);
    text-decoration: none;
    border-bottom: 1px solid rgba(125, 211, 252, .3);
    transition: color .18s, border-color .18s;
}

.article-body a:hover {
    color: #bae6fd;
    border-bottom-color: rgba(125, 211, 252, .7);
}

/* External link — suffix arrow only (no pill; pill breaks inline flow) */
.article-body a[href^="http"]::after {
    content: ' ↗';
    font-size: 0.75em;
    opacity: 0.6;
}

.article-body a.internal-link {
    color: #5eead4;
    border-bottom-color: rgba(94, 234, 212, .3);
}


/* ─── STRONG / EM ────────────────────────────────────────────────────────── */

.article-body strong {
    color: #f1f5f9;
    font-weight: 700;
}

.article-body em {
    color: #9fb3ff;
}


/* ─── BLOCKQUOTE (standard) ──────────────────────────────────────────────── */

.article-body blockquote {
    border-left: 3px solid rgba(148, 163, 184, .25);
    padding: 0.9rem 1.2rem;
    margin: 1.6em 0;
    color: var(--text-muted);
    font-style: italic;
    background: rgba(148, 163, 184, .04);
    border-radius: 0 8px 8px 0;
}


/* ─── CODE ───────────────────────────────────────────────────────────────── */

.article-body code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.875em;
    background: rgba(148, 163, 184, .1);
    padding: 0.15em 0.45em;
    border-radius: 4px;
    color: var(--teal-300);
}

.article-body pre {
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 10px;
    padding: 1.2rem 1.4rem;
    overflow-x: auto;
    margin: 1.6em 0;
}

.article-body pre code {
    background: none;
    padding: 0;
    font-size: 0.92rem;
}


/* ─── HR / DIVIDER ───────────────────────────────────────────────────────── */

.article-body hr,
.bsw-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .18), transparent);
    margin: 2.6em 0;
}


/* ─── IMAGES ─────────────────────────────────────────────────────────────── */

.article-body img,
.article-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 1.6em auto;
    border: 1px solid rgba(148, 163, 184, .12);
}

.bsw-figure {
    margin: 2em 0;
}

.bsw-figure__img {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, .12);
}

.bsw-figure__caption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    font-style: italic;
}


/* ─── TABLE ──────────────────────────────────────────────────────────────── */

.table-scroll {
    overflow-x: auto;
    margin: 1.8em 0;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, .12);
}

.article-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.article-table th {
    background: rgba(0, 191, 165, .08);
    color: var(--text-primary);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, .15);
    font-size: 0.875rem;
    letter-spacing: 0.3px;
}

.article-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, .07);
    color: var(--text-secondary);
    vertical-align: top;
}

.article-table tr:last-child td {
    border-bottom: none;
}

.article-table tr:hover td {
    background: rgba(148, 163, 184, .04);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BSW BRANDED CALLOUT BLOCKS
═══════════════════════════════════════════════════════════════════════════ */

.bsw-callout {
    border-radius: 10px;
    padding: 1.1rem 1.3rem;
    margin: 1.8em 0;
    position: relative;
}

.bsw-callout__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}

.bsw-callout__body {
    margin: 0;
    line-height: 1.65;
    font-size: 0.97rem;
}

/* ── INSIGHT (teal) ── */
.bsw-callout--insight {
    background: rgba(0, 191, 165, .07);
    border: 1px solid rgba(0, 191, 165, .22);
    border-left: 4px solid #00BFA5;
}

.bsw-callout--insight .bsw-callout__label {
    color: #00BFA5;
}

.bsw-callout--insight .bsw-callout__body {
    color: var(--text-primary);
}

/* ── WARNING (amber) ── */
.bsw-callout--warning {
    background: rgba(245, 158, 11, .06);
    border: 1px solid rgba(245, 158, 11, .22);
    border-left: 4px solid var(--amber-400);
}

.bsw-callout--warning .bsw-callout__label {
    color: var(--amber-400);
}

.bsw-callout--warning .bsw-callout__body {
    color: var(--text-primary);
}

/* ── ACTION (green) ── */
.bsw-callout--action {
    background: rgba(16, 185, 129, .06);
    border: 1px solid rgba(16, 185, 129, .22);
    border-left: 4px solid var(--green-500);
}

.bsw-callout--action .bsw-callout__label {
    color: var(--green-500);
}

.bsw-callout--action .bsw-callout__body {
    color: var(--text-primary);
}

/* ── BRAND QUOTE ── */
.bsw-quote {
    border-left: 4px solid #00BFA5;
    padding: 1.1rem 1.4rem;
    margin: 2em 0;
    background: rgba(0, 191, 165, .05);
    border-radius: 0 10px 10px 0;
}

.bsw-quote p {
    font-style: italic;
    font-size: 1.08rem;
    color: var(--text-primary);
    margin: 0 0 0.4em;
    line-height: 1.6;
}

.bsw-quote cite {
    font-size: 0.82rem;
    color: #00BFA5;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.4px;
}

/* ── STAT PAIR ── */
.bsw-stat-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.8em 0;
}

.bsw-stat {
    background: rgba(148, 163, 184, .05);
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bsw-stat__number {
    font-size: 1.9rem;
    font-weight: 800;
    color: #00BFA5;
    line-height: 1;
    letter-spacing: -1px;
}

.bsw-stat__label {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Quill embed wrapper */
.bsw-embed {
    display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════
   QUILL EDITOR SKIN
   Overrides Quill's snow theme to match BSW dark palette.
═══════════════════════════════════════════════════════════════════════════ */

#writeEditorWrap {
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(15, 23, 42, .6);
    display: flex;
    flex-direction: column;
}

/* Toolbar */
.ql-toolbar.ql-snow {
    background: rgba(11, 31, 58, .9);
    border: none !important;
    border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
    padding: 0.55rem 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
}

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 0.5rem;
    border-right: 1px solid rgba(148, 163, 184, .12);
    padding-right: 0.5rem;
}

.ql-toolbar.ql-snow .ql-formats:last-child {
    border-right: none;
}

.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker-label {
    color: var(--text-muted) !important;
    transition: color .15s, background .15s;
    border-radius: 5px;
    padding: 3px 6px !important;
    font-size: 0.82rem;
}

.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow .ql-picker-label:hover {
    color: var(--text-primary) !important;
    background: rgba(148, 163, 184, .1);
}

.ql-toolbar.ql-snow button.ql-active {
    color: #00BFA5 !important;
    background: rgba(0, 191, 165, .1);
}

.ql-toolbar.ql-snow .ql-stroke {
    stroke: var(--text-muted) !important;
}

.ql-toolbar.ql-snow .ql-fill {
    fill: var(--text-muted) !important;
}

.ql-toolbar.ql-snow button:hover .ql-stroke {
    stroke: var(--text-primary) !important;
}

.ql-toolbar.ql-snow button:hover .ql-fill {
    fill: var(--text-primary) !important;
}

.ql-toolbar.ql-snow button.ql-active .ql-stroke {
    stroke: #00BFA5 !important;
}

.ql-toolbar.ql-snow button.ql-active .ql-fill {
    fill: #00BFA5 !important;
}

/* Picker dropdown */
.ql-toolbar.ql-snow .ql-picker-options {
    background: var(--navy-900) !important;
    border: 1px solid rgba(148, 163, 184, .15) !important;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

.ql-toolbar.ql-snow .ql-picker-item:hover {
    color: #00BFA5 !important;
}

/* ─── COLOUR PICKER SWATCHES ──────────────────────────────────────────────
   IMPORTANT: never set display:grid/flex on .ql-picker-options — it breaks
   Quill's internal click-detection which expects inline-block item layout.
─────────────────────────────────────────────────────────────────────────── */
.ql-toolbar .ql-color.ql-color-picker .ql-picker-options {
    padding: 6px 8px !important;
    width: 360px !important;
    padding: 10px !important;
    background: #1E293B !important;
    border: 1px solid rgba(148, 163, 184, .2) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55) !important;
}

.ql-toolbar .ql-color.ql-color-picker .ql-picker-item {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    margin: 2px !important;
    transition: transform .1s ease, box-shadow .1s ease;
}

.ql-toolbar .ql-color.ql-color-picker .ql-picker-item:hover {
    transform: scale(1.25) !important;
    box-shadow: 0 0 0 2px #00BFA5 !important;
    color: inherit !important;
    border-color: transparent !important;
}

.ql-toolbar .ql-color.ql-color-picker .ql-picker-item.ql-selected {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #00BFA5 !important;
}

.ql-toolbar .ql-color.ql-color-picker .ql-picker-item[data-value=""] {
    background: rgba(148, 163, 184, .08) !important;
    border: 1px dashed rgba(148, 163, 184, .5) !important;
    position: relative;
}

.ql-toolbar .ql-color.ql-color-picker .ql-picker-item[data-value=""]::after {
    content: '✕';
    font-size: 10px;
    line-height: 1;
    color: rgba(148, 163, 184, .8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Editor area */
.ql-container.ql-snow {
    border: none !important;
    font-family: inherit;
}

.ql-editor {
    min-height: 480px;
    max-height: 720px;
    overflow-y: auto;
    padding: 1.6rem 2rem;
    color: var(--text-secondary);
    font-size: 1.04rem;
    line-height: 1.8;
    caret-color: #00BFA5;
}

.ql-editor:focus {
    outline: none;
}

.ql-editor.ql-blank::before {
    color: var(--text-light) !important;
    font-style: normal !important;
    font-size: 0.96rem;
    left: 2rem !important;
}

/* Mirror article typography in the editor */
.ql-editor h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1.6em 0 0.4em;
}

.ql-editor h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #dbe7ff;
    margin: 1.3em 0 0.35em;
}

.ql-editor p {
    margin: 0 0 1em;
}

.ql-editor strong {
    color: #f1f5f9;
}

.ql-editor em {
    color: #9fb3ff;
}

.ql-editor blockquote {
    border-left: 3px solid rgba(148, 163, 184, .25);
    padding-left: 1rem;
    margin: 1.2em 0;
    color: var(--text-muted);
    font-style: italic;
}

.ql-editor ul li::before {
    background: #00BFA5;
}

.ql-editor a {
    color: var(--sky-300);
}

/* Custom block preview inside the editor */
.ql-editor .bsw-callout--insight {
    background: rgba(0, 191, 165, .07);
    border-left: 4px solid #00BFA5;
    padding: .8rem 1rem;
    border-radius: 8px;
    margin: .8em 0;
}

.ql-editor .bsw-callout--warning {
    background: rgba(245, 158, 11, .06);
    border-left: 4px solid var(--amber-400);
    padding: .8rem 1rem;
    border-radius: 8px;
    margin: .8em 0;
}

.ql-editor .bsw-callout--action {
    background: rgba(16, 185, 129, .06);
    border-left: 4px solid var(--green-500);
    padding: .8rem 1rem;
    border-radius: 8px;
    margin: .8em 0;
}

.ql-editor .bsw-quote {
    border-left: 4px solid #00BFA5;
    padding: .8rem 1rem;
    background: rgba(0, 191, 165, .05);
    border-radius: 0 8px 8px 0;
    margin: .8em 0;
}

.ql-editor .bsw-stat-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    margin: .8em 0;
}

.ql-editor .bsw-stat {
    background: rgba(148, 163, 184, .05);
    border: 1px solid rgba(148, 163, 184, .12);
    border-radius: 8px;
    padding: .7rem .9rem;
}

.ql-editor .bsw-stat__number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #00BFA5;
    display: block;
}

.ql-editor .bsw-callout__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: .4rem;
}

.ql-editor .bsw-callout--insight .bsw-callout__label {
    color: #00BFA5;
}

.ql-editor .bsw-callout--warning .bsw-callout__label {
    color: var(--amber-400);
}

.ql-editor .bsw-callout--action .bsw-callout__label {
    color: var(--green-500);
}

/* Scrollbar */
.ql-editor::-webkit-scrollbar {
    width: 5px;
}

.ql-editor::-webkit-scrollbar-track {
    background: transparent;
}

.ql-editor::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .2);
    border-radius: 3px;
}


/* ─── WORD COUNT BAR ─────────────────────────────────────────────────────── */

#writeEditorMeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-top: 1px solid rgba(148, 163, 184, .1);
    background: rgba(11, 31, 58, .6);
}

#bswWordCount {
    font-size: 0.78rem;
    color: var(--text-muted);
}


/* ─── WRITE SECTION LAYOUT ───────────────────────────────────────────────── */

#write-section .form-section {
    max-width: 900px;
    margin: 0 auto;
}

.write-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.write-meta-row .form-group {
    margin: 0;
}


/* ─── ARTICLE MODAL ──────────────────────────────────────────────────────── */

.modal.article-modal .modal-body {
    padding: 1.8rem 2.2rem 2rem;
}

.article-header {
    margin-bottom: 1.8rem;
}

.article-header__title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.22;
    margin: 0 0 0.7rem;
    letter-spacing: -0.3px;
}

.article-header__excerpt {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
    border-left: 3px solid rgba(0, 191, 165, .35);
    padding-left: 1rem;
    margin: 0 0 1.2rem;
}

.article-header__divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(148, 163, 184, .18), transparent);
    margin: 1.2rem 0 0;
}


/* =========================================================
   EDITOR FONT SIZE SCALE
========================================================= */

.ql-editor .ql-size-xs {
    font-size: 0.72rem;
}

.ql-editor .ql-size-small {
    font-size: 0.88rem;
}

.ql-editor .ql-size-normal {
    font-size: 1rem;
}

.ql-editor .ql-size-medium {
    font-size: 1.12rem;
}

.ql-editor .ql-size-large {
    font-size: 1.28rem;
}

.ql-editor .ql-size-xlarge {
    font-size: 1.55rem;
}

.ql-editor .ql-size-huge {
    font-size: 1.9rem;
}


/* ─── QUILL FONT SIZES — article render ─────────────────────────────────── */

/* Base selectors (modal-body, prose, article-body) */
/* =========================================================
   ARTICLE RENDER FONT SIZE SCALE
========================================================= */

.article-body .ql-size-xs,
.modal-body .ql-size-xs,
.prose .ql-size-xs {
    font-size: 0.72rem;
}

.article-body .ql-size-small,
.modal-body .ql-size-small,
.prose .ql-size-small {
    font-size: 0.88rem;
}

.article-body .ql-size-normal,
.modal-body .ql-size-normal,
.prose .ql-size-normal {
    font-size: 1rem;
}

.article-body .ql-size-medium,
.modal-body .ql-size-medium,
.prose .ql-size-medium {
    font-size: 1.12rem;
}

.article-body .ql-size-large,
.modal-body .ql-size-large,
.prose .ql-size-large {
    font-size: 1.28rem;
}

.article-body .ql-size-xlarge,
.modal-body .ql-size-xlarge,
.prose .ql-size-xlarge {
    font-size: 1.55rem;
}

.article-body .ql-size-huge,
.modal-body .ql-size-huge,
.prose .ql-size-huge {
    font-size: 1.9rem;
}

/* Specificity boost: inside the lead paragraph, ql-size wins */
.article-body p .ql-size-xs {
    font-size: 0.72rem;
}

.article-body p .ql-size-small {
    font-size: 0.88rem;
}

.article-body p .ql-size-normal {
    font-size: 1rem;
}

.article-body p .ql-size-medium {
    font-size: 1.12rem;
}

.article-body p .ql-size-large {
    font-size: 1.28rem;
}

.article-body p .ql-size-xlarge {
    font-size: 1.55rem;
}

.article-body p .ql-size-huge {
    font-size: 1.9rem;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .article-body {
        font-size: 1rem;
    }

    .bsw-stat-pair {
        grid-template-columns: 1fr;
    }

    .modal.article-modal .modal-body {
        padding: 1rem 1.2rem;
    }

    .write-meta-row {
        grid-template-columns: 1fr;
    }

    .ql-editor {
        padding: 1rem;
        min-height: 360px;
    }
}

/* =========================================================
   EDIT MODAL TOOLBAR FIX
========================================================= */

#editEditorWrap {

    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(15, 23, 42, .6);
    display: flex;
    flex-direction: column;
}

#editToolbar {

    min-height: 52px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#editContentEditor .ql-editor {

    min-height: 520px;
}

/* ─── INLINE ARTICLE LINK (Mode A) ──────────────────────────────────────────
   Used when an internal article link sits inside a sentence with other text.
   Styled distinctly from regular external links — teal with a small indicator.
────────────────────────────────────────────────────────────────────────────── */

.bsw-inline-article-link {
    color: #2dd4bf;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(45, 212, 191, .4);
    font-weight: 600;
    transition: color .15s, border-color .15s;
    cursor: pointer;
}

.bsw-inline-article-link:hover {
    color: #5eead4;
    border-bottom-color: rgba(94, 234, 212, .8);
}

/* No ↗ arrow on internal links */
.article-body .bsw-inline-article-link[href^="http"]::after,
.article-body .bsw-inline-article-link::after {
    content: none !important;
}


/* ─── BLOCK ARTICLE LINK CARD (Mode B) ──────────────────────────────────────
   Used when an internal article link stands alone in its own paragraph.
   Label is "Read Next" (end of article) or "Related Article" (mid-article).
────────────────────────────────────────────────────────────────────────────── */

.bsw-article-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.4em 0;
    padding: 0.85rem 1.1rem;
    background: rgba(0, 191, 165, .05);
    border: 1px solid rgba(0, 191, 165, .2);
    border-left: 4px solid #00BFA5;
    border-radius: 0 10px 10px 0;
    text-decoration: none;
    color: var(--text-primary);
    transition: background .18s, border-color .18s;
    cursor: pointer;
    border-bottom: none;
}

.bsw-article-link:hover {
    background: rgba(0, 191, 165, .09);
    border-color: rgba(0, 191, 165, .4);
    border-left-color: #00BFA5;
    color: var(--text-primary);
    border-bottom: none;
}

/* No ↗ suffix on block cards */
.bsw-article-link::after,
.article-body .bsw-article-link[href^="http"]::after {
    content: none !important;
}

.bsw-article-link__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: rgba(0, 191, 165, .12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.bsw-article-link__text {
    flex: 1;
    min-width: 0;
}

.bsw-article-link__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #00BFA5;
    margin-bottom: 0.2rem;
}

.bsw-article-link__title {
    display: block;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bsw-article-link__arrow {
    flex-shrink: 0;
    color: rgba(0, 191, 165, .6);
    font-size: 1.1rem;
}

@media (max-width: 640px) {
    .bsw-article-link {
        padding: 0.7rem 0.85rem;
        gap: 0.6rem;
    }

    .bsw-article-link__icon {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
}