/* ============================================================
 * TYPOGRAPHY SYSTEM PREVIEW
 * assets/css/pages/typography-builder/preview/type-system-preview.css
 * ------------------------------------------------------------
 * Design system inspector layout.
 * Typography values are sourced from --tsp-<seg>-* CSS variables
 * written onto .tsp by type-system-preview.js.
 *
 * Sections:
 *   1. Root & tokens
 *   2. Section header
 *   3. System summary chips
 *   4. Typography roles table (3-column)
 *   5. Visual hierarchy specimen sheet
 *   6. Scale progression bars
 * ============================================================ */


/* ── 1. Root ─────────────────────────────────────────────────── */

.tsp {
    --tsp-bg:        #ffffff;
    --tsp-surface:   #f8fafc;
    --tsp-border:    #e2e8f0;
    --tsp-text:      #0f172a;
    --tsp-muted:     #64748b;
    --tsp-faint:     #94a3b8;
    --tsp-accent:    #4f46e5;

    /* Badge group colours */
    --tsp-badge-heading-bg:   #ede9fe;
    --tsp-badge-heading-text: #5b21b6;
    --tsp-badge-body-bg:      #dbeafe;
    --tsp-badge-body-text:    #1e40af;
    --tsp-badge-ui-bg:        #dcfce7;
    --tsp-badge-ui-text:      #15803d;

    /* Scale bar colours */
    --tsp-bar-heading: #4f46e5;
    --tsp-bar-body:    #0ea5e9;
    --tsp-bar-ui:      #10b981;

    background: var(--tsp-bg);
    color: var(--tsp-text);
    padding: 32px 40px 72px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 52px;
}


/* ── 2. Section header ───────────────────────────────────────── */

.tsp-section-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 18px;
}

.tsp-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tsp-text);
}

.tsp-section-desc {
    font-size: 0.8125rem;
    color: var(--tsp-muted);
}


/* ── 3. System summary chips ─────────────────────────────────── */

.tsp-overview {
    display: flex;
    gap: 0;
    border: 1px solid var(--tsp-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--tsp-surface);
}

.tsp-overview-chip {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 20px;
    border-right: 1px solid var(--tsp-border);
}

.tsp-overview-chip:last-child {
    border-right: none;
}

/* Icon + label row inside each chip */
.tsp-chip-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tsp-chip-icon {
    color: var(--tsp-faint);
    flex-shrink: 0;
    display: block;
}

.tsp-overview-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tsp-faint);
}

.tsp-overview-value {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--tsp-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    margin-top: 2px;
}


/* ── 4. Typography roles table ───────────────────────────────── */

.tsp-table-wrap {
    display: flex;
    flex-direction: column;
}

.tsp-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--tsp-border);
    border-radius: 10px;
    overflow: hidden;
}

/* Head */

.tsp-th {
    padding: 10px 16px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tsp-faint);
    background: var(--tsp-surface);
    border-bottom: 1px solid var(--tsp-border);
    text-align: left;
    white-space: nowrap;
}

.tsp-th:first-child { padding-left: 20px; }

/* Rows */

.tsp-td {
    padding: 9px 16px;
    border-bottom: 1px solid var(--tsp-border);
    vertical-align: middle;
}

.tsp-td:first-child { padding-left: 20px; }

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

/* Subtle group separators */
.tsp-tr--body:first-of-type .tsp-td,
.tsp-tr--ui:first-of-type .tsp-td {
    border-top: 1px solid var(--tsp-border);
}

/* Role name column */

.tsp-td--name {
    width: 110px;
    white-space: nowrap;
}

.tsp-role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tsp-role-badge--heading { background: var(--tsp-badge-heading-bg); color: var(--tsp-badge-heading-text); }
.tsp-role-badge--body    { background: var(--tsp-badge-body-bg);    color: var(--tsp-badge-body-text); }
.tsp-role-badge--ui      { background: var(--tsp-badge-ui-bg);      color: var(--tsp-badge-ui-text); }

/* Sample column — expands to fill available space */

.tsp-td--sample {
    width: 100%;
}

/* Sample text — rendered at each role's own size via CSS vars.
   No truncation: this is a typography inspection tool, full text must be readable. */

.tsp-sample {
    display: block;
    color: var(--tsp-text);
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.tsp-sample--display   { font-size: var(--tsp-display-font-size,   2.5rem);   font-weight: var(--tsp-display-font-weight,  800); font-family: var(--tsp-display-font-family, inherit); line-height: 1; }
.tsp-sample--h1        { font-size: var(--tsp-h1-font-size,        1.75rem);  font-weight: var(--tsp-h1-font-weight,       700); font-family: var(--tsp-h1-font-family,      inherit); line-height: 1; }
.tsp-sample--h2        { font-size: var(--tsp-h2-font-size,        1.5rem);   font-weight: var(--tsp-h2-font-weight,       700); font-family: var(--tsp-h2-font-family,      inherit); line-height: 1; }
.tsp-sample--h3        { font-size: var(--tsp-h3-font-size,        1.25rem);  font-weight: var(--tsp-h3-font-weight,       600); font-family: var(--tsp-h3-font-family,      inherit); line-height: 1; }
.tsp-sample--h4        { font-size: var(--tsp-h4-font-size,        1.125rem); font-weight: var(--tsp-h4-font-weight,       600); font-family: var(--tsp-h4-font-family,      inherit); line-height: 1; }
.tsp-sample--h5        { font-size: var(--tsp-h5-font-size,        1rem);     font-weight: var(--tsp-h5-font-weight,       600); font-family: var(--tsp-h5-font-family,      inherit); line-height: 1; }
.tsp-sample--h6        { font-size: var(--tsp-h6-font-size,        0.875rem); font-weight: var(--tsp-h6-font-weight,       600); font-family: var(--tsp-h6-font-family,      inherit); line-height: 1; }
.tsp-sample--body-lg   { font-size: var(--tsp-body-lg-font-size,   1.125rem); font-weight: var(--tsp-body-lg-font-weight,  400); font-family: var(--tsp-body-lg-font-family, inherit); }
.tsp-sample--body      { font-size: var(--tsp-body-font-size,      1rem);     font-weight: var(--tsp-body-font-weight,     400); font-family: var(--tsp-body-font-family,    inherit); }
.tsp-sample--body-sm   { font-size: var(--tsp-body-sm-font-size,   0.875rem); font-weight: var(--tsp-body-sm-font-weight,  400); font-family: var(--tsp-body-sm-font-family, inherit); }
.tsp-sample--caption   { font-size: var(--tsp-caption-font-size,   0.75rem);  font-weight: var(--tsp-caption-font-weight,  400); font-family: var(--tsp-caption-font-family, inherit); color: var(--tsp-muted); }
.tsp-sample--label     { font-size: var(--tsp-label-font-size,     0.875rem); font-weight: var(--tsp-label-font-weight,    500); font-family: var(--tsp-label-font-family,   inherit); letter-spacing: 0.01em; }
.tsp-sample--button    { font-size: var(--tsp-button-font-size,    0.875rem); font-weight: var(--tsp-button-font-weight,   600); font-family: var(--tsp-button-font-family,  inherit); letter-spacing: 0.02em; }
.tsp-sample--code      { font-size: var(--tsp-code-font-size,      0.875rem); font-weight: var(--tsp-code-font-weight,     400); font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; color: var(--tsp-accent); }

/* Token column — shrink-wraps to content, no truncation on the code string */

.tsp-td--token {
    width: 1px;
    white-space: nowrap;
    padding-left: 24px;
}

.tsp-token-combined {
    display: inline;
    font-size: 0.75rem;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    color: var(--tsp-accent);
    font-variant-numeric: tabular-nums;
    background: none;
    border: none;
    padding: 0;
}


/* ── 5. Visual hierarchy specimen sheet ──────────────────────── */

.tsp-specimen-wrap {
    display: flex;
    flex-direction: column;
}

.tsp-specimen {
    border: 1px solid var(--tsp-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--tsp-bg);
}

.tsp-specimen-item {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--tsp-border);
    padding: 18px 32px;
}

.tsp-specimen-item:last-child {
    border-bottom: none;
}

/* Larger breathing room for heading-scale entries */
.tsp-specimen-item--heading { padding: 20px 32px; }
.tsp-specimen-item--body    { padding: 16px 32px; }
.tsp-specimen-item--ui      { padding: 13px 32px; }

/* Visual separator between role groups */
.tsp-specimen-item--group-start {
    border-top: 2px solid var(--tsp-border);
}

/* The rendered type — this is the hero of the section */
.tsp-specimen-text {
    display: block;
    color: var(--tsp-text);
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Subtle role label floated to the right — visible but never competing */
.tsp-specimen-tag {
    flex-shrink: 0;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #78909c;
    align-self: flex-end;
    padding-bottom: 1px;
    white-space: nowrap;
}

/* Specimen text — each role rendered at its own token values via CSS vars */

/* Specimen text rules — only the 9 roles rendered in the specimen sheet */

.tsp-specimen-text--display { font-size: var(--tsp-display-font-size,  2.5rem);   font-weight: var(--tsp-display-font-weight, 800); font-family: var(--tsp-display-font-family, inherit); letter-spacing: var(--tsp-display-letter-spacing, -0.03em); line-height: 1.05; }
.tsp-specimen-text--h1      { font-size: var(--tsp-h1-font-size,       1.75rem);  font-weight: var(--tsp-h1-font-weight,      700); font-family: var(--tsp-h1-font-family,      inherit); letter-spacing: var(--tsp-h1-letter-spacing,      -0.02em); line-height: 1.1;  }
.tsp-specimen-text--h2      { font-size: var(--tsp-h2-font-size,       1.5rem);   font-weight: var(--tsp-h2-font-weight,      700); font-family: var(--tsp-h2-font-family,      inherit); letter-spacing: var(--tsp-h2-letter-spacing,      -0.01em); line-height: 1.15; }
.tsp-specimen-text--h3      { font-size: var(--tsp-h3-font-size,       1.25rem);  font-weight: var(--tsp-h3-font-weight,      600); font-family: var(--tsp-h3-font-family,      inherit); letter-spacing: var(--tsp-h3-letter-spacing,      -0.01em); line-height: 1.2;  }
.tsp-specimen-text--h4      { font-size: var(--tsp-h4-font-size,       1.125rem); font-weight: var(--tsp-h4-font-weight,      600); font-family: var(--tsp-h4-font-family,      inherit); letter-spacing: var(--tsp-h4-letter-spacing,      0em);     line-height: 1.25; }
.tsp-specimen-text--body-lg { font-size: var(--tsp-body-lg-font-size,  1.125rem); font-weight: var(--tsp-body-lg-font-weight, 400); font-family: var(--tsp-body-lg-font-family, inherit); line-height: var(--tsp-body-lg-line-height, 1.65); }
.tsp-specimen-text--body    { font-size: var(--tsp-body-font-size,     1rem);     font-weight: var(--tsp-body-font-weight,    400); font-family: var(--tsp-body-font-family,    inherit); line-height: var(--tsp-body-line-height,    1.65); }
.tsp-specimen-text--caption { font-size: var(--tsp-caption-font-size,  0.75rem);  font-weight: var(--tsp-caption-font-weight, 400); font-family: var(--tsp-caption-font-family, inherit); letter-spacing: 0.02em; color: var(--tsp-muted); }
.tsp-specimen-text--code    { font-size: var(--tsp-code-font-size,     0.875rem); font-weight: var(--tsp-code-font-weight,    400); font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; color: var(--tsp-accent); }


/* ── 6. Scale progression bars ───────────────────────────────── */

.tsp-scale-wrap {
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
}

.tsp-scale-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tsp-scale-row {
    display: grid;
    grid-template-columns: 92px 1fr 76px;
    align-items: center;
    gap: 18px;
}

.tsp-scale-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--tsp-muted);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tsp-scale-track {
    height: 6px;
    background: var(--tsp-surface);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--tsp-border);
}

.tsp-scale-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.25s ease;
    min-width: 6px;
}

.tsp-scale-bar--heading { background: var(--tsp-bar-heading); }
.tsp-scale-bar--body    { background: var(--tsp-bar-body); }
.tsp-scale-bar--ui      { background: var(--tsp-bar-ui); }

.tsp-scale-size {
    font-size: 0.6875rem;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    color: var(--tsp-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* ── Dark mode ───────────────────────────────────────────────────
   .tsp uses its own local palette (not --preview-*), so override the
   local vars here. Scoped to the typography tool only. Bars stay. */
[data-theme="dark"] [data-page="typography-builder"] .tsp {
    --tsp-bg:        #1e293b;
    --tsp-surface:   #0f172a;
    --tsp-border:    #334155;
    --tsp-text:      #f1f5f9;
    --tsp-muted:     #94a3b8;
    --tsp-faint:     #64748b;
    --tsp-accent:    #818cf8;

    --tsp-badge-heading-bg:   rgba(129, 140, 248, 0.18);
    --tsp-badge-heading-text: #c4b5fd;
    --tsp-badge-body-bg:      rgba(56, 138, 221, 0.18);
    --tsp-badge-body-text:    #93c5fd;
    --tsp-badge-ui-bg:        rgba(34, 197, 94, 0.16);
    --tsp-badge-ui-text:      #86efac;
}

[data-theme="dark"] [data-page="typography-builder"] .tsp-specimen-tag {
    color: #64748b;
}