/* =========================================================
   TYPOGRAPHY BUILDER — RESPONSIVE
   assets/css/pages/typography-builder/typograpy-responsive.css
   =========================================================
   Breakpoint structure (mirrors palette-generator pattern):

     ≤ 1024px          Tablet — compact two-column workspace
     768px – 1024px    Tablet tabs — compact but icon + label (like desktop)
     ≤  768px          Mobile — drawer, single col, horizontal health row,
                         compact tabs with full icon + label
     ≤  767px          Mobile tabs — icon-only inactive (matches palette exactly)
     ≤  540px          Narrow phone — health check stacks 2×2
     ≤  480px          Small phone — further compaction
     ≤  360px          Tiny phone — minimal spacing

   Desktop layout is completely untouched.
   All responsive rules for this page live ONLY here.
   ========================================================= */


/* Tablet/mobile workspace + hero + drawer responsiveness now lives in the
   shared shell — assets/css/components/tool-shell.css. Only typography-specific
   responsive rules (health bar, controls, reading cards, preview content)
   remain in this file. */



/* ── Mobile Drawer — ≤ 768px ───────────────────────────────── */
/* Sidebar becomes a full-screen overlay drawer.
   Tabs keep full icon + label at this width.
   Health check stays in one horizontal row. */
@media (max-width: 768px) {


    /* Hero, workspace, sidebar drawer, backdrop, close button and mobile
       trigger bar are handled by the shared shell (tool-shell.css). */


    /* ─── Controls panel — inside the drawer ────────────────── */

    /* flex: none + overflow: visible lets the panel grow to full
       natural height so the sidebar's overflow-y: auto scrolls it. */
    .tb-controls-panel {
        border-radius: 0;
        border: none;
        box-shadow: none;
        flex: none;
        overflow: visible;
    }

    /* Section padding — slightly tighter for mobile */
    .tool-section {
        padding: var(--space-4);
    }

    /* Dropdown cards — touch-friendly */
    .tool-dropdown-card {
        padding: 0.75rem 1rem;
    }

    .tool-dropdown-opt {
        padding: 0.65rem 1rem;
        min-height: 44px;
    }

    /* Dropdown list direction + positioning is handled entirely by JS
       (position:fixed with viewport-based coordinates). No CSS override needed. */

    /* Reading style cards — compact card padding */
    .tb-reading-card {
        padding: var(--space-3) var(--space-2);
    }


    /* Health-bar compaction now lives in the shared shell (tool-shell.css). */
}


/* Narrow-phone (≤540px) health-bar 2×2 stacking now lives in the shared
   shell — assets/css/components/tool-shell.css. */


/* ── Small phone — ≤ 480px ─────────────────────────────────── */
@media (max-width: 480px) {

    /* Reading cards — tighter padding on small screens */
    .tb-reading-card {
        padding: var(--space-2);
        column-gap: 0.5rem;
    }

    .tb-reading-card-icon {
        width: 26px;
        height: 26px;
    }

    /* Dropdown cards */
    .tool-dropdown-card {
        padding: 0.65rem 0.875rem;
    }
}


/* ── Tiny phone — ≤ 360px ──────────────────────────────────── */
@media (max-width: 360px) {

    .tool-section {
        padding: var(--space-3);
    }

    .tb-reading-card-label {
        font-size: 0.75rem;
    }

    .tb-reading-card-desc {
        font-size: 0.65rem;
    }
}


/* ═══════════════════════════════════════════════════════════════
   WEBSITE PREVIEW — Layout responsive
   ═══════════════════════════════════════════════════════════════
   Targets: .tb-wp-* classes (preview-only, no cross-page risk)

   CRITICAL — never touch:
     • font-size / line-height / letter-spacing on .tb-wp-* roles
     • any --te-* CSS custom property overrides
     • transform: scale / zoom on the preview root
   These values are owned by the Typography Token Engine.

   Safe to adjust:
     • grid-template-columns, gap, flex-wrap
     • padding / margin on containers and sections
     • display:none on decorative or overflow-causing elements
     • border-left/top structural dividers
   ─────────────────────────────────────────────────────────────
   Moved here from website-preview.css (was @media max-width:760px).
   Breakpoints aligned with the workspace layout breakpoints above.
   ═══════════════════════════════════════════════════════════════ */


/* ── Preview nav: compact at ≤ 768px ──────────────────────────
   At this width the workspace switches to single-column and the
   preview panel fills the page width. The nav link row (~280px)
   plus actions (~210px) plus brand (~120px) totals ~650px which
   overflows at narrower viewport widths — hide links outright.    */
@media (max-width: 768px) {

    .tb-wp-container {
        padding: 0 20px;
    }

    .tb-wp-nav {
        padding: 12px 20px;
        gap: 12px;
    }

    /* Hide nav links — brand + actions row still communicates site chrome */
    .tb-wp-nav-links {
        display: none;
    }
}


/* ── Preview layout: full stack at ≤ 640px ────────────────────
   At 640px viewport the preview content area is ~560px wide.
   Three-column grids (hierarchy, check-list, stats) need ~186px
   per column — usable but very tight with the column padding.
   The reading head (1fr 300px) leaves only ~224px for copy.
   Stack everything to one column for readable layout.            */
@media (max-width: 640px) {

    /* Hero — single column, hide illustration */
    .tb-wp-hero {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .tb-wp-hero-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .tb-wp-hero-illus {
        display: none;
    }

    /* Remove fixed max-width so subtitle fills the column */
    .tb-wp-hero-sub {
        max-width: 100%;
    }

    /* Allow CTA buttons to wrap if both don't fit side-by-side */
    .tb-wp-hero-actions {
        flex-wrap: wrap;
    }

    /* Features — single column with top dividers */
    .tb-wp-hierarchy-grid {
        grid-template-columns: 1fr;
    }

    .tb-wp-hierarchy-col {
        padding: 20px 0 0;
        border-left: none !important;
        border-top: 1px solid var(--wp-border);
    }

    .tb-wp-hierarchy-col:first-child {
        padding-top: 0;
        border-top: none;
    }

    /* Reading — single column; blockquote flows below copy */
    .tb-wp-reading-head {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Check-list — single column */
    .tb-wp-check-list {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tb-wp-check-item {
        padding: 0;
        border-left: none !important;
    }

    /* Stats — single column */
    .tb-wp-stats-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .tb-wp-stat-item {
        padding: 0;
        border-left: none !important;
    }
}


/* ── Preview: small phone at ≤ 480px ──────────────────────────
   Reduce container and section padding to reclaim horizontal
   space. Stack CTA buttons vertically.                          */
@media (max-width: 480px) {

    .tb-wp-container {
        padding: 0 16px;
    }

    .tb-wp-nav {
        padding: 10px 16px;
    }

    /* Hide ghost "Sign in" — brand + primary CTA fit in remaining space */
    .tb-wp-nav .tb-wp-btn-ghost {
        display: none;
    }

    .tb-wp-hero {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    /* Stack CTA buttons vertically and align to start */
    .tb-wp-hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .tb-wp-hierarchy {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .tb-wp-reading {
        padding-top: 28px;
        padding-bottom: 20px;
    }

    .tb-wp-blockquote {
        padding: 18px 20px;
    }

    .tb-wp-stats {
        padding-top: 24px;
        padding-bottom: 28px;
    }

    /* Reduce hero badge gap */
    .tb-wp-hero-badge {
        gap: 8px;
        margin-bottom: 18px;
    }

    /* Reduce hierarchy column gap on single-column layout */
    .tb-wp-hierarchy-col {
        column-gap: 12px;
    }

    /* Slightly smaller icon circles to free up row space */
    .tb-wp-hierarchy-icon {
        width: 44px;
        height: 44px;
    }

    .tb-wp-stat-icon {
        width: 42px;
        height: 42px;
    }
}


/* ── Preview: tiny phone at ≤ 360px ───────────────────────────
   Minimum padding — squeeze as much content width as possible.  */
@media (max-width: 360px) {

    .tb-wp-container {
        padding: 0 12px;
    }

    .tb-wp-nav {
        padding: 10px 12px;
    }

    /* Tighten hero vertical padding */
    .tb-wp-hero {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    /* Tighten section padding on very narrow screens */
    .tb-wp-hierarchy {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .tb-wp-reading {
        padding-top: 20px;
        padding-bottom: 16px;
    }

    .tb-wp-stats {
        padding-top: 20px;
        padding-bottom: 24px;
    }

    /* Tighten blockquote */
    .tb-wp-blockquote {
        padding: 14px 16px;
    }

    /* Tighten check-list item spacing */
    .tb-wp-check-list {
        gap: 12px;
    }

    /* Icons — minimal size to preserve content width */
    .tb-wp-hierarchy-icon {
        width: 38px;
        height: 38px;
    }

    .tb-wp-stat-icon {
        width: 38px;
        height: 38px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   DASHBOARD PREVIEW — Layout responsive
   ---------------------------------------------------------------
   CRITICAL: Do NOT modify, override, scale, clamp, transform, or
   recalculate any token-engine-controlled values. The following
   classes are token-controlled and must remain completely untouched:
   .tb-dp-h1 .tb-dp-h2 .tb-dp-h3 .tb-dp-body .tb-dp-body-sm
   .tb-dp-label .tb-dp-button .tb-dp-caption .tb-dp-th .tb-dp-td
   .tb-dp-input .tb-dp-select
   ---------------------------------------------------------------
   Only layout, spacing, grid columns, flex direction, overflow,
   and display are changed here.
   ═══════════════════════════════════════════════════════════════ */

/* ── Dashboard: nav links overflow at ≤ 640px ─────────────────
   At 640px the dashboard content area is ~560px. The topnav left
   side (brand + 4 links) totals ~492px — plus right side it
   overflows. Hide nav links; keep brand + avatar.               */
@media (max-width: 640px) {

    .tb-dp-topnav {
        padding: 0 20px;
    }
    .tb-dp-nav-left {
        gap: 0;
    }
    .tb-dp-nav-links {
        display: none;
    }

    /* Main: tighter horizontal padding */
    .tb-dp-main {
        padding: 20px 20px 32px;
        gap: 24px;
    }

    /* Page header: allow export button to wrap below title */
    .tb-dp-page-header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* KPI: 2x2 grid */
    .tb-dp-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Table: enable horizontal scroll so columns aren't squished */
    .tb-dp-table-wrap {
        overflow-x: auto;
    }
    .tb-dp-table {
        min-width: 480px;
    }

    /* Analytics stats: allow wrapping with reduced gap */
    .tb-dp-analytics-stats {
        gap: 20px;
        flex-wrap: wrap;
    }

    /* Bottom row: single column */
    .tb-dp-bottom-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ── Dashboard: small phone at ≤ 480px ─────────────────────── */
@media (max-width: 480px) {

    .tb-dp-topnav {
        padding: 0 16px;
    }
    .tb-dp-main {
        padding: 16px 16px 28px;
        gap: 20px;
    }
    .tb-dp-kpi-card {
        padding: 12px 16px;
    }
    .tb-dp-analytics-stats {
        gap: 14px;
    }
    .tb-dp-bottom-row {
        gap: 20px;
    }
}

/* ── Dashboard: tiny phone at ≤ 360px ──────────────────────── */
@media (max-width: 360px) {

    .tb-dp-topnav {
        padding: 0 12px;
    }
    .tb-dp-main {
        padding: 12px 12px 24px;
        gap: 16px;
    }

    /* Hide user name — keep only the avatar to reclaim nav space */
    .tb-dp-nav-right .tb-dp-label {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════
   BLOG PREVIEW — Layout responsive
   ---------------------------------------------------------------
   CRITICAL: Do NOT modify, override, scale, clamp, transform, or
   recalculate any token-engine-controlled values. The following
   classes are token-controlled and must remain completely untouched:
   .tb-bp-h1 .tb-bp-h2 .tb-bp-h3 .tb-bp-body-lg .tb-bp-body
   .tb-bp-body-sm .tb-bp-label .tb-bp-caption .tb-bp-code
   .tb-bp-th .tb-bp-td
   ---------------------------------------------------------------
   The blog preview is already a single-column article — it is
   naturally responsive. Only outer padding, vertical spacing, and
   the table min-width need adjustment.
   ═══════════════════════════════════════════════════════════════ */

/* ── Blog: compact at ≤ 640px ─────────────────────────────────
   Reduce outer vertical breathing room; set table min-width so the
   4-col header row (white-space: nowrap) reliably triggers the
   existing overflow-x: auto on .tb-bp-table-wrap.               */
@media (max-width: 640px) {

    .tb-bp {
        padding: 32px 20px 48px;
    }

    /* Allow header text to wrap so all 4 columns fit within the container.
       No horizontal scroll — table reflows to the available width.    */
    .tb-bp-th {
        white-space: normal;
        padding: 8px 10px;
    }
    .tb-bp-td {
        padding: 8px 10px;
    }

    .tb-bp-blockquote {
        padding: 20px 22px;
    }
}

/* ── Blog: small phone at ≤ 480px ─────────────────────────────
   Reduce vertical section spacing so the article doesn't feel
   sparsely spaced on a short mobile screen.                      */
@media (max-width: 480px) {

    .tb-bp {
        padding: 24px 20px 40px;
    }
    .tb-bp-header {
        margin-bottom: 28px;
    }
    .tb-bp-intro {
        margin-top: 28px;
    }
    .tb-bp-section {
        margin-top: 36px;
    }
    .tb-bp-blockquote {
        margin: 36px 0 0;
        padding: 18px 20px;
    }
    .tb-bp-footer {
        margin-top: 36px;
    }
    .tb-bp-pre {
        padding: 16px 18px;
    }
}

/* ── Blog: tiny phone at ≤ 360px ──────────────────────────────
   Minimal padding — squeeze content width as much as possible
   without harming readability.                                   */
@media (max-width: 360px) {

    .tb-bp {
        padding: 20px 16px 32px;
    }
    .tb-bp-header {
        margin-bottom: 20px;
    }
    .tb-bp-intro {
        margin-top: 20px;
    }
    .tb-bp-section {
        margin-top: 28px;
    }
    .tb-bp-blockquote {
        margin: 28px 0 0;
        padding: 16px 18px;
    }
    .tb-bp-footer {
        margin-top: 28px;
    }
    .tb-bp-pre {
        padding: 14px 14px;
    }

    /* Further tighten table cells at 320–360px — 4 cols in ~288px */
    .tb-bp-th,
    .tb-bp-td {
        padding: 6px 8px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   TYPE SYSTEM PREVIEW — Layout responsive
   ---------------------------------------------------------------
   CRITICAL: Do NOT modify, override, scale, clamp, transform, or
   recalculate any token-engine-controlled values. The following
   are driven by --tsp-*-font-size/weight/family/line-height vars
   and must remain completely untouched:
   .tsp-sample--*        (table sample column text)
   .tsp-specimen-text--* (visual hierarchy specimen text)
   Scale bar widths are set by JS inline style — also untouched.
   ---------------------------------------------------------------
   Only layout, padding, grid columns, flex wrap, and display
   are changed here.
   ═══════════════════════════════════════════════════════════════ */

/* ── Type System: compact outer + 2×2 chips at ≤ 640px ────────
   At 640px the 40px horizontal padding on .tsp eats 80px total.
   The 4-chip row starts clipping "GENERATED ROLES" label below
   ~580px viewport. Switch chips to 2×2 and reduce all padding.   */
@media (max-width: 640px) {

    .tsp {
        padding: 24px 20px 48px;
        gap: 36px;
    }

    /* Overview: 2×2 grid via flex-wrap.
       box-sizing: border-box keeps each chip exactly 50% wide
       so the border-right doesn't push chips onto a new row.      */
    .tsp-overview {
        flex-wrap: wrap;
    }
    .tsp-overview-chip {
        flex: 1 1 50%;
        box-sizing: border-box;
    }
    /* Remove right border from even chips (right column) */
    .tsp-overview-chip:nth-child(2n) {
        border-right: none;
    }
    /* Add top border to bottom-row chips */
    .tsp-overview-chip:nth-child(n+3) {
        border-top: 1px solid var(--tsp-border);
    }

    /* Specimen: reduce 32px side padding to give text more room */
    .tsp-specimen-item         { padding: 14px 20px; }
    .tsp-specimen-item--heading { padding: 16px 20px; }
    .tsp-specimen-item--body   { padding: 12px 20px; }
    .tsp-specimen-item--ui     { padding: 10px 20px; }

    /* Scale bars: compact fixed columns (label + value) */
    .tsp-scale-row {
        grid-template-columns: 72px 1fr 58px;
        gap: 12px;
    }
}

/* ── Type System: small phone at ≤ 480px ──────────────────────
   Token column is white-space:nowrap with strings up to ~226px —
   it consumes all available space and forces the sample column
   to near zero. Hide it; the table works as Role | Sample only.  */
@media (max-width: 480px) {

    .tsp {
        padding: 20px 16px 40px;
        gap: 28px;
    }
    .tsp-overview-chip {
        padding: 12px 14px;
    }

    /* Specimen */
    .tsp-specimen-item         { padding: 12px 16px; }
    .tsp-specimen-item--heading { padding: 14px 16px; }
    .tsp-specimen-item--body   { padding: 10px 16px; }
    .tsp-specimen-item--ui     { padding: 8px  16px; }

    /* Hide token column — too wide for mobile; Role + Sample is sufficient */
    .tsp-th:last-child,
    .tsp-td--token {
        display: none;
    }

    /* Scale bars */
    .tsp-scale-row {
        grid-template-columns: 64px 1fr 52px;
        gap: 10px;
    }
}

/* ── Type System: tiny phone at ≤ 360px ───────────────────────
   Minimum viable — squeeze padding while keeping all sections
   readable and bar visualization functional.                      */
@media (max-width: 360px) {

    .tsp {
        padding: 16px 12px 32px;
        gap: 20px;
    }
    .tsp-overview-chip {
        padding: 10px 12px;
    }

    /* Specimen */
    .tsp-specimen-item         { padding: 10px 14px; }
    .tsp-specimen-item--heading { padding: 12px 14px; }
    .tsp-specimen-item--body   { padding: 8px  14px; }
    .tsp-specimen-item--ui     { padding: 6px  14px; }

    /* Scale bars: minimum column widths */
    .tsp-scale-row {
        grid-template-columns: 52px 1fr 44px;
        gap: 8px;
    }
}