/* ==========================================================================
   Pharma Digest shared study-note content styles
   Used by: admin editor canvas, admin preview, and student reading pages.
   The rules intentionally work on both light and dark surfaces.
   ========================================================================== */

.note-content,
.portal-rich-text,
.mce-content-body {
    --pd-note-line: rgba(100, 116, 139, .3);
    --pd-note-soft: rgba(100, 116, 139, .075);
    --pd-note-strong-soft: rgba(100, 116, 139, .13);
    --pd-note-link: #0e7490;
    --pd-note-heading: #102a43;
    --pd-note-muted: #536678;
    --pd-note-code-bg: #f3f6f8;
    --pd-note-code-text: #0f766e;
    overflow-wrap: anywhere;
}

.portal-rich-text {
    --pd-note-line: rgba(102, 200, 210, .19);
    --pd-note-soft: rgba(13, 31, 52, .66);
    --pd-note-strong-soft: rgba(40, 235, 217, .08);
    --pd-note-link: #7ff1e9;
    --pd-note-heading: var(--portal-heading, #f2fbff);
    --pd-note-muted: var(--portal-muted, #91a9ba);
    --pd-note-code-bg: rgba(13, 31, 52, .78);
    --pd-note-code-text: #9fe8c8;
}

/* Text rhythm */

.note-content p,
.portal-rich-text p,
.mce-content-body p {
    margin: 0 0 1rem;
}

.note-content h2,
.note-content h3,
.note-content h4,
.note-content h5,
.note-content h6,
.portal-rich-text h2,
.portal-rich-text h3,
.portal-rich-text h4,
.portal-rich-text h5,
.portal-rich-text h6,
.mce-content-body h2,
.mce-content-body h3,
.mce-content-body h4,
.mce-content-body h5,
.mce-content-body h6 {
    margin: 1.55em 0 .55em;
    color: var(--pd-note-heading);
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -.012em;
}

.note-content h2,
.portal-rich-text h2,
.mce-content-body h2 {
    padding-bottom: .34rem;
    border-bottom: 1px solid var(--pd-note-line);
    font-size: 1.46em;
}

.note-content h3,
.portal-rich-text h3,
.mce-content-body h3 {
    font-size: 1.22em;
}

.note-content h4,
.portal-rich-text h4,
.mce-content-body h4 {
    font-size: 1.07em;
}

.note-content h5,
.portal-rich-text h5,
.mce-content-body h5,
.note-content h6,
.portal-rich-text h6,
.mce-content-body h6 {
    font-size: 1em;
    letter-spacing: .01em;
}

.note-content ul,
.note-content ol,
.portal-rich-text ul,
.portal-rich-text ol,
.mce-content-body ul,
.mce-content-body ol {
    margin: 0 0 1rem;
    padding-left: 1.45rem;
}

.note-content li,
.portal-rich-text li,
.mce-content-body li {
    margin: .28rem 0;
}

.note-content li > ul,
.note-content li > ol,
.portal-rich-text li > ul,
.portal-rich-text li > ol,
.mce-content-body li > ul,
.mce-content-body li > ol {
    margin: .3rem 0;
}

.note-content a,
.portal-rich-text a,
.mce-content-body a {
    color: var(--pd-note-link);
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

.note-content strong,
.note-content b,
.portal-rich-text strong,
.portal-rich-text b,
.mce-content-body strong,
.mce-content-body b {
    font-weight: 800;
}

.note-content sup,
.note-content sub,
.portal-rich-text sup,
.portal-rich-text sub,
.mce-content-body sup,
.mce-content-body sub {
    font-size: .72em;
    line-height: 0;
}

.note-content code,
.portal-rich-text code,
.mce-content-body code {
    padding: .12rem .34rem;
    border: 1px solid var(--pd-note-line);
    border-radius: 5px;
    color: var(--pd-note-code-text);
    background: var(--pd-note-code-bg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
}

.note-content pre,
.portal-rich-text pre,
.mce-content-body pre {
    margin: 0 0 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--pd-note-line);
    border-radius: 10px;
    overflow-x: auto;
    background: var(--pd-note-code-bg);
    font-size: .88em;
    line-height: 1.55;
}

.note-content pre code,
.portal-rich-text pre code,
.mce-content-body pre code {
    padding: 0;
    border: 0;
    background: transparent;
}

.note-content blockquote,
.portal-rich-text blockquote,
.mce-content-body blockquote {
    margin: 1.25rem 0;
    padding: .85rem 1rem;
    border-left: 4px solid #d9a441;
    border-radius: 0 11px 11px 0;
    color: var(--pd-note-muted);
    background: var(--pd-note-soft);
}

.note-content blockquote > :last-child,
.portal-rich-text blockquote > :last-child,
.mce-content-body blockquote > :last-child {
    margin-bottom: 0;
}

.note-content hr,
.portal-rich-text hr,
.mce-content-body hr {
    margin: 1.6rem 0;
    border: 0;
    border-top: 1px solid var(--pd-note-line);
}

/* Tables: rendering always adds a scrollable .pd-table-wrap around tables. */

.pd-table-wrap {
    max-width: 100%;
    margin: 0 0 1.15rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pd-table-wrap > table,
.note-content .pd-table-wrap table,
.portal-rich-text .pd-table-wrap table,
.mce-content-body .pd-table-wrap table {
    display: table;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: .93em;
}

.note-content table caption,
.portal-rich-text table caption,
.mce-content-body table caption {
    margin-bottom: .5rem;
    color: var(--pd-note-muted);
    font-size: .86em;
    text-align: left;
}

.note-content th,
.note-content td,
.portal-rich-text th,
.portal-rich-text td,
.mce-content-body th,
.mce-content-body td {
    padding: .6rem .72rem;
    border: 1px solid var(--pd-note-line);
    vertical-align: top;
    text-align: left;
}

.note-content th,
.portal-rich-text th,
.mce-content-body th {
    color: var(--pd-note-heading);
    background: var(--pd-note-strong-soft);
    font-weight: 800;
}

.note-content tbody tr:nth-child(even) td,
.portal-rich-text tbody tr:nth-child(even) td,
.mce-content-body tbody tr:nth-child(even) td {
    background: var(--pd-note-soft);
}

/* Images, figures, captions and alignment classes */

.note-content img,
.portal-rich-text img,
.mce-content-body img {
    max-width: 100%;
    height: auto;
}

.pd-note-picture,
.note-content picture,
.portal-rich-text picture,
.mce-content-body picture {
    display: block;
    max-width: 100%;
}

.pd-note-picture img,
.note-content picture img,
.portal-rich-text picture img,
.mce-content-body picture img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: 10px;
}

.pd-note-image,
.note-content img.pd-note-image,
.portal-rich-text img.pd-note-image,
.mce-content-body img.pd-note-image {
    display: block;
    margin: 1.1rem 0;
    border-radius: 10px;
}

.note-content figure,
.portal-rich-text figure,
.mce-content-body figure {
    max-width: 100%;
    margin: 1.25rem 0;
}

.note-content figcaption,
.portal-rich-text figcaption,
.mce-content-body figcaption {
    margin-top: .45rem;
    color: var(--pd-note-muted);
    font-size: .82em;
    line-height: 1.5;
    text-align: center;
}

.note-content .pd-align-left,
.portal-rich-text .pd-align-left,
.mce-content-body .pd-align-left {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.note-content .pd-align-center,
.portal-rich-text .pd-align-center,
.mce-content-body .pd-align-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.note-content .pd-align-right,
.portal-rich-text .pd-align-right,
.mce-content-body .pd-align-right {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

.note-content .pd-align-justify,
.portal-rich-text .pd-align-justify,
.mce-content-body .pd-align-justify {
    text-align: justify;
}

/* Educational callouts */

.pd-callout {
    position: relative;
    margin: 1.25rem 0;
    padding: .9rem 1rem .9rem 1.05rem;
    border: 1px solid var(--pd-note-line);
    border-left-width: 4px;
    border-radius: 0 12px 12px 0;
    color: inherit;
    background: var(--pd-note-soft);
}

.pd-callout > :last-child {
    margin-bottom: 0;
}

.pd-callout > p:first-child strong:first-child {
    font-size: .82em;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pd-callout--definition {
    border-left-color: #3b82f6;
    background: rgba(59, 130, 246, .085);
}

.pd-callout--definition > p:first-child strong:first-child {
    color: #3b82f6;
}

.pd-callout--important {
    border-left-color: #f59e0b;
    background: rgba(245, 158, 11, .095);
}

.pd-callout--important > p:first-child strong:first-child {
    color: #d97706;
}

.pd-callout--exam-tip {
    border-left-color: #10b981;
    background: rgba(16, 185, 129, .09);
}

.pd-callout--exam-tip > p:first-child strong:first-child {
    color: #059669;
}

.pd-callout--warning {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, .085);
}

.pd-callout--warning > p:first-child strong:first-child {
    color: #dc2626;
}

.pd-callout--example {
    border-left-color: #8b5cf6;
    background: rgba(139, 92, 246, .085);
}

.pd-callout--example > p:first-child strong:first-child {
    color: #7c3aed;
}

.pd-callout--key {
    border-left-color: #14b8a6;
    background: rgba(20, 184, 166, .085);
}

.pd-callout--key > p:first-child strong:first-child {
    color: #0d9488;
}

.portal-rich-text .pd-callout--definition > p:first-child strong:first-child,
.mce-content-body .pd-callout--definition > p:first-child strong:first-child {
    color: #7fb3ff;
}

.portal-rich-text .pd-callout--important > p:first-child strong:first-child,
.mce-content-body .pd-callout--important > p:first-child strong:first-child {
    color: #ffc45c;
}

.portal-rich-text .pd-callout--exam-tip > p:first-child strong:first-child,
.mce-content-body .pd-callout--exam-tip > p:first-child strong:first-child {
    color: #63e6b0;
}

.portal-rich-text .pd-callout--warning > p:first-child strong:first-child,
.mce-content-body .pd-callout--warning > p:first-child strong:first-child {
    color: #ff9eaa;
}

.portal-rich-text .pd-callout--example > p:first-child strong:first-child,
.mce-content-body .pd-callout--example > p:first-child strong:first-child {
    color: #c4a5ff;
}

.portal-rich-text .pd-callout--key > p:first-child strong:first-child,
.mce-content-body .pd-callout--key > p:first-child strong:first-child {
    color: #5eead4;
}

/* Formula / equation block */

.pd-formula {
    margin: 1.25rem 0;
    padding: .95rem 1rem;
    border: 1px dashed rgba(6, 193, 255, .48);
    border-radius: 11px;
    overflow-x: auto;
    color: inherit;
    background: rgba(6, 193, 255, .055);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .98em;
    line-height: 1.65;
    text-align: center;
    white-space: pre-wrap;
}

.pd-formula > :last-child {
    margin-bottom: 0;
}

.pd-formula p {
    margin-bottom: 0;
}

/* Student page already applies its own max width; these keep long content safe. */

.note-content,
.portal-rich-text,
.mce-content-body {
    min-width: 0;
}

@media (max-width: 700px) {
    .pd-table-wrap > table,
    .note-content .pd-table-wrap table,
    .portal-rich-text .pd-table-wrap table,
    .mce-content-body .pd-table-wrap table {
        min-width: 33rem;
    }

    .note-content th,
    .note-content td,
    .portal-rich-text th,
    .portal-rich-text td,
    .mce-content-body th,
    .mce-content-body td {
        padding: .5rem .58rem;
    }

    .pd-callout {
        padding: .8rem .85rem .8rem .9rem;
    }

    .pd-formula {
        padding: .8rem;
        text-align: left;
    }
}

@media print {
    .pd-table-wrap {
        overflow: visible;
    }

    .pd-callout,
    .pd-formula,
    .note-content blockquote,
    .portal-rich-text blockquote {
        break-inside: avoid;
    }
}

/* --------------------------------------------------------------------------
   Reading typography refinement (shared by editor, preview and student pages)
   -------------------------------------------------------------------------- */

.note-content,
.portal-rich-text,
.mce-content-body {
    font-family: 'Kalpurush', 'Noto Sans Bengali', 'Nirmala UI', Tahoma, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.mce-content-body {
    color-scheme: light;
    padding: 24px clamp(20px, 4vw, 52px) 32px !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    font-size: 17px;
    line-height: 1.78;
}

.note-content {
    color: inherit;
    font-size: 1rem;
    line-height: 1.78;
}

.portal-rich-text {
    font-size: .95rem;
    line-height: 1.84;
}

.note-content p,
.portal-rich-text p,
.mce-content-body p {
    margin-bottom: .92em;
}

.note-content h2,
.portal-rich-text h2,
.mce-content-body h2 {
    margin-top: 1.65em;
    font-size: 1.42em;
}

.note-content h3,
.portal-rich-text h3,
.mce-content-body h3 {
    margin-top: 1.45em;
    font-size: 1.2em;
}

.note-content h4,
.portal-rich-text h4,
.mce-content-body h4 {
    margin-top: 1.35em;
    font-size: 1.06em;
}

.note-content ul,
.note-content ol,
.portal-rich-text ul,
.portal-rich-text ol,
.mce-content-body ul,
.mce-content-body ol {
    padding-left: 1.6em;
}

.note-content li,
.portal-rich-text li,
.mce-content-body li {
    margin: .34em 0;
    padding-left: .08em;
}

.note-content li > p,
.portal-rich-text li > p,
.mce-content-body li > p {
    margin-bottom: .35em;
}

.note-content sup,
.note-content sub,
.portal-rich-text sup,
.portal-rich-text sub,
.mce-content-body sup,
.mce-content-body sub {
    position: relative;
    vertical-align: baseline;
    font-size: .68em;
}

.note-content sup,
.portal-rich-text sup,
.mce-content-body sup {
    top: -.55em;
}

.note-content sub,
.portal-rich-text sub,
.mce-content-body sub {
    bottom: -.3em;
}

.note-content th,
.note-content td,
.portal-rich-text th,
.portal-rich-text td,
.mce-content-body th,
.mce-content-body td {
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.note-content table,
.portal-rich-text table,
.mce-content-body table {
    margin-bottom: 1.2em;
}

.note-content .pd-formula,
.portal-rich-text .pd-formula,
.mce-content-body .pd-formula {
    padding: 1rem 1.15rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-align: left;
}

.note-content .pd-callout,
.portal-rich-text .pd-callout,
.mce-content-body .pd-callout {
    margin: 1.2rem 0;
}

.note-content blockquote,
.portal-rich-text blockquote,
.mce-content-body blockquote {
    line-height: 1.72;
}

.note-content mark,
.portal-rich-text mark,
.mce-content-body mark {
    padding: .04em .16em;
    border-radius: 3px;
    color: inherit;
    background: rgba(250, 204, 21, .28);
}

@media (max-width: 700px) {
    .mce-content-body {
        padding: 18px 16px 26px !important;
        font-size: 16px;
    }

    .portal-rich-text {
        font-size: .93rem;
    }
}

/* Scrollable tables should match the surrounding reading surface. */
.pd-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .45) transparent;
}

.note-content .pd-table-wrap,
.mce-content-body .pd-table-wrap {
    scrollbar-color: rgba(15, 118, 110, .45) transparent;
}

.portal-rich-text .pd-table-wrap {
    scrollbar-color: rgba(127, 241, 233, .42) transparent;
}

.pd-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.pd-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.pd-table-wrap::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(100, 116, 139, .45);
    background-clip: padding-box;
}

.portal-rich-text .pd-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(127, 241, 233, .42);
    background-clip: padding-box;
}

/* Public reading surface: the article card is dark, so note tokens must not
   fall back to the light admin-editor palette. */
body.pd-content-detail .note-content {
    --pd-note-line: rgba(107, 205, 211, .2);
    --pd-note-soft: rgba(6, 28, 47, .58);
    --pd-note-strong-soft: rgba(40, 235, 217, .08);
    --pd-note-link: #72e4e0;
    --pd-note-heading: #f3fbff;
    --pd-note-muted: #9eb6c5;
    --pd-note-code-bg: rgba(7, 31, 51, .82);
    --pd-note-code-text: #9fe8c8;
    color: var(--pd-text);
}

body.pd-content-detail .note-content h2,
body.pd-content-detail .note-content h3,
body.pd-content-detail .note-content h4,
body.pd-content-detail .note-content h5,
body.pd-content-detail .note-content h6,
body.pd-content-detail .note-content th {
    color: #f3fbff;
}

body.pd-content-detail .note-content td {
    color: var(--pd-text);
}

body.pd-content-detail .note-content tbody tr:nth-child(even) td {
    background: rgba(8, 31, 52, .54);
}

body.pd-content-detail .note-content blockquote {
    color: #c3dde5;
}

/* Every note image is centered unless it is the lightbox copy. */
.note-content img,
.note-content .pd-note-image,
.note-content picture img,
.portal-rich-text img,
.pd-article-content img,
.pd-dictionary-article img {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
}

.note-content img.pd-note-image {
    margin-top: 1.1rem;
    margin-bottom: 1.1rem;
}

.note-content picture,
.pd-note-picture,
.note-content figure,
.portal-rich-text figure {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.note-content figure > img,
.note-content figure > picture,
.note-content figure > .pd-note-picture {
    margin-left: auto !important;
    margin-right: auto !important;
}

.note-content img:not(.pd-lightbox__image),
.portal-rich-text img:not(.pd-lightbox__image) {
    cursor: zoom-in;
}

.note-content img:not(.pd-lightbox__image):focus-visible,
.portal-rich-text img:not(.pd-lightbox__image):focus-visible {
    outline: 3px solid var(--pd-accent);
    outline-offset: 4px;
}