/* ============================================================
 * TYPOGRAPHY BLOG PREVIEW
 * assets/css/pages/typography-builder/preview/blog-preview.css
 * ------------------------------------------------------------
 * Article layout for evaluating long-form reading quality.
 * Typography is sourced entirely from --te-text-<role>-* CSS variables,
 * written onto .tb-bp by blog-preview.js. Role classes below consume
 * those variables with static fallbacks so the article renders before
 * tokens arrive.
 * ============================================================ */


/* ── Fixed neutral chrome palette ──────────────────────────── */

.tb-bp {
    --bp-bg:        var(--preview-bg);
    --bp-surface:   var(--preview-surface);
    --bp-text:      var(--preview-text);
    --bp-muted:     var(--preview-muted);
    --bp-border:    var(--preview-border);
    --bp-accent:    var(--preview-accent);
    --bp-code-bg:   #f1f5f9;
    --bp-code-text: #334155;

    background: var(--bp-bg);
    padding: 48px 24px 72px;
    min-height: 100%;
}

/* Dark mode — chrome follows --preview-*; only the code block tint is hardcoded. */
[data-theme="dark"] [data-page="typography-builder"] .tb-bp {
    --bp-code-bg:   #0f172a;
    --bp-code-text: #cbd5e1;
}


/* ── Article column ─────────────────────────────────────────── */
/* 680px is the standard optimal reading measure.               */

.tb-bp-article {
    max-width: 680px;
    margin: 0 auto;
}


/* ── Role classes — typography sourced from tokens ─────────── */

.tb-bp-h1 {
    font-family:    var(--te-text-h1-font-family, inherit);
    font-size:      var(--te-text-h1-font-size, 2.5rem);
    font-weight:    var(--te-text-h1-font-weight, 700);
    line-height:    var(--te-text-h1-line-height, 1.15);
    letter-spacing: var(--te-text-h1-letter-spacing, -0.02em);
    margin: 0;
}
.tb-bp-h2 {
    font-family:    var(--te-text-h2-font-family, inherit);
    font-size:      var(--te-text-h2-font-size, 1.875rem);
    font-weight:    var(--te-text-h2-font-weight, 700);
    line-height:    var(--te-text-h2-line-height, 1.2);
    letter-spacing: var(--te-text-h2-letter-spacing, -0.02em);
    margin: 0;
}
.tb-bp-h3 {
    font-family:    var(--te-text-h3-font-family, inherit);
    font-size:      var(--te-text-h3-font-size, 1.5rem);
    font-weight:    var(--te-text-h3-font-weight, 600);
    line-height:    var(--te-text-h3-line-height, 1.3);
    letter-spacing: var(--te-text-h3-letter-spacing, -0.01em);
    margin: 0;
}
.tb-bp-body-lg {
    font-family:    var(--te-text-body-lg-font-family, inherit);
    font-size:      var(--te-text-body-lg-font-size, 1.125rem);
    font-weight:    var(--te-text-body-lg-font-weight, 400);
    line-height:    var(--te-text-body-lg-line-height, 1.6);
    letter-spacing: var(--te-text-body-lg-letter-spacing, 0em);
    margin: 0;
}
.tb-bp-body {
    font-family:    var(--te-text-body-font-family, inherit);
    font-size:      var(--te-text-body-font-size, 1rem);
    font-weight:    var(--te-text-body-font-weight, 400);
    line-height:    var(--te-text-body-line-height, 1.6);
    letter-spacing: var(--te-text-body-letter-spacing, 0em);
    margin: 0;
    color: var(--bp-text);
}
.tb-bp-body-sm {
    font-family:    var(--te-text-body-sm-font-family, inherit);
    font-size:      var(--te-text-body-sm-font-size, 0.875rem);
    font-weight:    var(--te-text-body-sm-font-weight, 400);
    line-height:    var(--te-text-body-sm-line-height, 1.6);
    letter-spacing: var(--te-text-body-sm-letter-spacing, 0em);
    margin: 0;
}
.tb-bp-label {
    font-family:    var(--te-text-label-font-family, inherit);
    font-size:      var(--te-text-label-font-size, 0.875rem);
    font-weight:    var(--te-text-label-font-weight, 500);
    line-height:    var(--te-text-label-line-height, 1.5);
    letter-spacing: var(--te-text-label-letter-spacing, 0em);
    margin: 0;
}
.tb-bp-caption {
    font-family:    var(--te-text-caption-font-family, inherit);
    font-size:      var(--te-text-caption-font-size, 0.75rem);
    font-weight:    var(--te-text-caption-font-weight, 400);
    line-height:    var(--te-text-caption-line-height, 1.5);
    letter-spacing: var(--te-text-caption-letter-spacing, 0.025em);
    margin: 0;
}
.tb-bp-code {
    font-family:    var(--te-text-code-font-family, 'Fira Code', 'Courier New', monospace);
    font-size:      var(--te-text-code-font-size, 0.875rem);
    font-weight:    var(--te-text-code-font-weight, 400);
    line-height:    var(--te-text-code-line-height, 1.6);
    letter-spacing: var(--te-text-code-letter-spacing, 0em);
    color: var(--bp-code-text);
}


/* ── Article header ─────────────────────────────────────────── */

.tb-bp-header {
    margin-bottom: 40px;
}
.tb-bp-category {
    display: inline-block;
    color: var(--bp-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}
.tb-bp-h1 {
    color: var(--bp-text);
    margin-bottom: 16px;
}
.tb-bp-subtitle {
    color: var(--bp-muted);
    margin-bottom: 20px;
}
.tb-bp-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.tb-bp-meta-row .tb-bp-caption {
    color: var(--bp-muted);
}
.tb-bp-meta-sep {
    color: var(--bp-border);
    font-size: 0.75rem;
    user-select: none;
}


/* ── Horizontal rule ────────────────────────────────────────── */

.tb-bp-rule {
    border: none;
    border-top: 1px solid var(--bp-border);
    margin: 0;
}


/* ── Introduction ───────────────────────────────────────────── */

.tb-bp-intro {
    margin-top: 40px;
}
.tb-bp-intro .tb-bp-body + .tb-bp-body {
    margin-top: 20px;
}


/* ── Content sections ───────────────────────────────────────── */

.tb-bp-section {
    margin-top: 48px;
}
.tb-bp-section .tb-bp-h2,
.tb-bp-section .tb-bp-h3 {
    color: var(--bp-text);
    margin-bottom: 20px;
}
.tb-bp-section .tb-bp-body + .tb-bp-body {
    margin-top: 20px;
}
.tb-bp-section .tb-bp-body {
    color: var(--bp-muted);
}


/* ── Blockquote ─────────────────────────────────────────────── */

.tb-bp-blockquote {
    margin: 48px 0 0;
    padding: 24px 28px;
    border-left: 3px solid var(--bp-accent);
    background: var(--bp-surface);
    border-radius: 0 8px 8px 0;
}
.tb-bp-quote-text {
    color: var(--bp-text);
    font-style: italic;
    margin-bottom: 12px;
}
.tb-bp-quote-attr {
    color: var(--bp-muted);
}


/* ── Lists ──────────────────────────────────────────────────── */

.tb-bp-list-item {
    color: var(--bp-muted);
    padding-left: 20px;
    position: relative;
}
.tb-bp-list-item + .tb-bp-list-item {
    margin-top: 10px;
}
.tb-bp-list-item--bullet::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--bp-accent);
}
.tb-bp-list-item--numbered {
    counter-increment: none;
}
.tb-bp-list-item--numbered::before {
    content: attr(data-num) '.';
    position: absolute;
    left: 0;
    color: var(--bp-accent);
    font-weight: 600;
}
.tb-bp-section .tb-bp-body:not(.tb-bp-list-item) {
    padding-left: 0;
}

/* Spacing between the paragraph before ordered list and list items */
.tb-bp-list-item--numbered:first-of-type,
.tb-bp-section .tb-bp-body + .tb-bp-list-item {
    margin-top: 14px;
}


/* ── Code block ─────────────────────────────────────────────── */

.tb-bp-pre {
    background: var(--bp-code-bg);
    border: 1px solid var(--bp-border);
    border-radius: 8px;
    padding: 20px 24px;
    margin-top: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tb-bp-pre::-webkit-scrollbar {
    display: none;
}
.tb-bp-pre .tb-bp-code {
    display: block;
    white-space: pre;
}


/* ── Table ──────────────────────────────────────────────────── */

.tb-bp-table-wrap {
    margin-top: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border: 1px solid var(--bp-border);
    border-radius: 8px;
}
.tb-bp-table-wrap::-webkit-scrollbar {
    display: none;
}
.tb-bp-table {
    width: 100%;
    border-collapse: collapse;
}
.tb-bp-th {
    font-family:    var(--te-text-label-font-family, inherit);
    font-size:      var(--te-text-label-font-size, 0.875rem);
    font-weight:    var(--te-text-label-font-weight, 500);
    line-height:    var(--te-text-label-line-height, 1.5);
    letter-spacing: var(--te-text-label-letter-spacing, 0em);
    text-align: left;
    padding: 10px 16px;
    color: var(--bp-text);
    background: var(--bp-surface);
    border-bottom: 1px solid var(--bp-border);
    white-space: nowrap;
}
.tb-bp-td {
    font-family:    var(--te-text-body-sm-font-family, inherit);
    font-size:      var(--te-text-body-sm-font-size, 0.875rem);
    font-weight:    var(--te-text-body-sm-font-weight, 400);
    line-height:    var(--te-text-body-sm-line-height, 1.5);
    letter-spacing: var(--te-text-body-sm-letter-spacing, 0em);
    padding: 10px 16px;
    color: var(--bp-muted);
    border-bottom: 1px solid var(--bp-border);
}
.tb-bp-tr:last-child .tb-bp-td {
    border-bottom: none;
}
.tb-bp-td--label {
    color: var(--bp-text);
    font-weight: 500;
}


/* ── Article footer ─────────────────────────────────────────── */

.tb-bp-footer {
    margin-top: 48px;
}
.tb-bp-footer .tb-bp-rule {
    margin-bottom: 24px;
}
.tb-bp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.tb-bp-tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: 999px;
    color: var(--bp-muted);
}
.tb-bp-footer-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tb-bp-footer-meta .tb-bp-caption {
    color: var(--bp-muted);
}
.tb-bp-footer-meta .tb-bp-meta-sep {
    color: var(--bp-border);
}