/* ===================================================================
   Article body styling, shared by every surface that renders a post.

   Loaded by Views/Blog/Post.cshtml (what readers see), by the preview
   modal in Views/BlogAdmin/Editor.cshtml, and by TinyMCE itself as
   content_css so the editing surface matches too.

   It lives here because it used to be duplicated by hand between the
   reader page and the preview modal, with a comment asking whoever
   changed one to remember the other. That is exactly how the chart and
   callout rules ended up on the public page only, and an author looking
   at the editor concluded the callouts had not worked.

   Everything is scoped to .post-content. TinyMCE gets that class on its
   iframe body via body_class.
   =================================================================== */

    /* Content - improved contrast */
    .post-content {
        max-width: 760px;
        margin: 0 auto;
        font-size: 18px;
        line-height: 1.8;
        color: #1e293b;
    }

    [data-bs-theme='dark'] .post-content {
        color: #e2e8f0;
    }

    .post-content h1, .post-content h2, .post-content h3,
    .post-content h4, .post-content h5, .post-content h6 {
        margin-top: 2em;
        margin-bottom: 0.75em;
        font-weight: 600;
        line-height: 1.3;
    }

    .post-content h2 {
        font-size: 28px;
    }

    .post-content h3 {
        font-size: 24px;
    }

    .post-content h4 {
        font-size: 20px;
    }

    .post-content p {
        margin-bottom: 1.5em;
    }

    .post-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 24px 0;
    }

    .post-content blockquote {
        border-left: 4px solid var(--bs-primary);
        padding-left: 24px;
        margin: 24px 0;
        font-style: italic;
        color: #475569;
    }

    [data-bs-theme='dark'] .post-content blockquote {
        color: #cbd5e1;
    }

    .post-content ul, .post-content ol {
        margin-bottom: 1.5em;
        padding-left: 1.5em;
    }

    .post-content li {
        margin-bottom: 0.5em;
    }

    .post-content pre {
        background: var(--bs-tertiary-bg);
        border-radius: 8px;
        padding: 16px;
        overflow-x: auto;
        margin: 24px 0;
    }

    .post-content code {
        font-family: 'SF Mono', Monaco, 'Courier New', monospace;
        font-size: 0.9em;
    }

    .post-content table {
        width: 100%;
        margin: 24px 0;
        border-collapse: collapse;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .post-content th, .post-content td {
        padding: 12px;
        border: 1px solid var(--bs-border-color);
        text-align: left;
        min-width: 100px;
    }

    .post-content th {
        background: var(--bs-tertiary-bg);
        font-weight: 600;
    }

    /* Data charts. Rendered server side as inline SVG and stored in the post
       body, so the only job here is spacing, the caption, and keeping a wide
       chart inside the column on a phone. Structural ink in the SVG is
       currentColor, which is why nothing sets a colour. */
    .post-content .fgb-figure {
        margin: 32px 0;
        padding: 0;
        max-width: 100%;
    }

    .post-content .fgb-figure svg {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .post-content .fgb-figure figcaption {
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--bs-secondary-color);
        text-align: left;
    }

    /* Each section's closing takeaway, lifted out of the body copy. Same device
       as The Read newsletter, and the same colours, because the newsletter was
       already using these tokens: --fgb-accent-subtle is #f0fdf4 in light and a
       10% green wash in dark, so the panel works in both without a second rule. */
    .post-content .fgb-read {
        margin: 22px 0 10px;
        padding: 13px 18px;
        background: var(--fgb-accent-subtle);
        border-left: 4px solid var(--fgb-accent);
        border-radius: 0 6px 6px 0;
        font-size: 16px;
        line-height: 1.6;
        color: var(--fgb-text-primary);
    }

    /* accent-hover is the darker green on light and the lighter one on dark,
       so the label stays readable against the wash either way. */
    .post-content .fgb-read strong {
        color: var(--fgb-accent-hover);
    }

    /* Chart paint. The SVG carries a literal hex on every shape so it still
       reads in a feed reader, and these rules outrank a presentation attribute,
       so on the site the colours follow the theme tokens instead. Inline
       style="fill:..." is not an option: the display sanitizer runs style
       through a CSS allowlist that has no fill in it and deletes the lot. */
    .post-content .fgb-figure .fgb-ch-easy { fill: var(--fgb-diff-easy); }
    .post-content .fgb-figure .fgb-ch-easier { fill: var(--fgb-diff-easier); }
    .post-content .fgb-figure .fgb-ch-neutral { fill: var(--fgb-diff-neutral); }
    .post-content .fgb-figure .fgb-ch-harder { fill: var(--fgb-diff-harder); }
    .post-content .fgb-figure .fgb-ch-hard { fill: var(--fgb-diff-hard); }

    .post-content .fgb-figure .fgb-ch-rewards { fill: var(--fgb-fit-rewards); }
    .post-content .fgb-figure .fgb-ch-discounts { fill: var(--fgb-fit-discounts); }

    .post-content .fgb-figure .fgb-ch-sg1 { fill: var(--fgb-ramp-2); }
    .post-content .fgb-figure .fgb-ch-sg2 { fill: var(--fgb-ramp-3); }
    .post-content .fgb-figure .fgb-ch-sg3 { fill: var(--fgb-ramp-4); }
    .post-content .fgb-figure .fgb-ch-sg4 { fill: var(--fgb-ramp-5); }

    .post-content .fgb-figure .fgb-ch-track { fill: var(--fgb-chart-track); }

    /* Below roughly 520px the hole numbers and the winners' names start to
       collide, so the chart keeps its drawn width and scrolls instead of
       shrinking every label into illegibility. */
    @media (max-width: 520px) {
        .post-content .fgb-figure {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .post-content .fgb-figure svg {
            width: 640px;
            max-width: none;
        }

        .post-content .fgb-figure figcaption {
            position: sticky;
            left: 0;
        }
    }

    .post-content a {
        color: var(--bs-primary);
        text-decoration: underline;
    }

        .post-content a:hover {
            text-decoration: none;
        }