/* =========================================================
   SPACING BUILDER — Scale preview
   assets/css/pages/spacing-builder/preview/scale-preview.css
   =========================================================
   Styles the ruler specimen + Usage Map (SpacingScalePreview).
   Chrome colors use the shared --preview-* palette declared on
   .tool-preview-panel (tool-shell.css). Spacing values are data,
   set as bar widths inline by the preview module.
   ========================================================= */

.sp-scale-preview {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 28px;
    background: var(--preview-bg);
    color: var(--preview-text);
    border: 1px solid var(--preview-border);
    border-radius: 12px;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Section headings ── */
.sp-scale-heading,
.sp-usage-heading {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--preview-muted);
    margin-bottom: 14px;
}


/* =========================================================
   RULER SPECIMEN
   ========================================================= */

.sp-scale-row {
    display: grid;
    grid-template-columns: 52px 1fr 132px;
    align-items: center;
    gap: 14px;
    padding: 5px 0;
}

.sp-scale-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--preview-text);
    font-variant-numeric: tabular-nums;
}

.sp-scale-track {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 16px;
    position: relative;
}

/* Ruler background — faint ticks at the active base grid interval
   (--sp-ruler-step, set per-render from controls.baseGrid). Lives behind
   the bar via z-index so the bar always reads as the dominant element.
   ::after repeats every 4th minor tick (--sp-ruler-major-step) at higher
   contrast, so the ruler reads in groups like a real measuring tool. */
.sp-scale-track::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to right,
        var(--preview-muted) 0,
        var(--preview-muted) 1px,
        transparent 1px,
        transparent var(--sp-ruler-step, 8px)
    );
    opacity: 0.3;
    pointer-events: none;
}

.sp-scale-track::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to right,
        var(--preview-muted) 0,
        var(--preview-muted) 2px,
        transparent 2px,
        transparent var(--sp-ruler-major-step, 32px)
    );
    opacity: 0.55;
    pointer-events: none;
}

.sp-scale-bar {
    position: relative;
    z-index: 1;
    height: 14px;
    max-width: 100%;
    background: var(--preview-accent);
    border-radius: 3px;
    min-width: 2px;
}

.sp-scale-val {
    font-size: 0.75rem;
    color: var(--preview-muted);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}


/* =========================================================
   USAGE MAP
   ========================================================= */

.sp-usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.sp-usage-table th {
    text-align: left;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--preview-muted);
    padding: 8px 10px;
    border-bottom: 1px solid var(--preview-border);
    white-space: nowrap;
}

.sp-usage-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--preview-border);
    color: var(--preview-text);
    vertical-align: top;
}

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

.sp-usage-role  { font-weight: 600; white-space: nowrap; }

.sp-usage-token {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--preview-accent);
    white-space: nowrap;
}

.sp-usage-val {
    color: var(--preview-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sp-usage-use {
    color: var(--preview-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}


/* =========================================================
   RESPONSIVE — reclaim width on narrow / mobile-frame
   ========================================================= */

@media (max-width: 540px) {
    .sp-scale-preview { padding: 18px; gap: 24px; }

    .sp-scale-row { grid-template-columns: 44px 1fr 96px; gap: 10px; }

    /* Drop the long "use" column — Role · Token · Value stay */
    .sp-usage-table th:last-child,
    .sp-usage-use { display: none; }

    .sp-usage-table th,
    .sp-usage-table td { padding: 7px 8px; }
}