/* =========================================================
   PALETTE BUILDER — RESPONSIVE
   assets/css/pages/palette-responsive.css
   =========================================================
   All viewport-specific overrides for the Color Palette
   Builder tool. Consolidated from:

     palette-builder.css
     preview/desktop-preview.css
     preview/ui-components-preview.css
     preview/palette-role-preview.css
     preview/illustration-preview.css

   Base component styles remain in their source files.
   Only @media blocks and responsive overrides live here.

   Breakpoints (existing — no new breakpoints introduced):
     ≤ 900px   — UI components intro, illustration canvas
     ≤ 860px   — Palette role preview grid
     ≥ 769px   — Desktop sticky bar restore (companion to ≤768px)
     ≤ 768px   — Primary layout switch: hero, a11y, cards, sticky bar
     ≤ 700px   — Preview panel padding, SaaS preview, UI component grids
     ≤ 600px   — Hero scale step 2
     ≤ 540px   — UI component grids, role preview grid
     ≤ 430px   — Hero scale step 3, UI component grids
     ≤ 375px   — Hero scale step 4 (final)

   Dead rules removed (not migrated):
     .pp-layout { grid-template-columns: 1fr }
       — .pp-layout is a flex container; grid rule had no effect

     .pp-prv-cards { grid-template-columns: 1fr 1fr }
       — .pp-prv-cards does not exist in the current build

     .pp-layout { padding-bottom: 140px } inside @media (max-width: 768px)
       — identical to the default value; was redundant
   ========================================================= */


/* ========================================
   LARGE TABLET (≤1000px)
   ======================================== */

/* ── UI Components: intro panel and button grid ── */
/* ── Illustration canvas: single-column ── */
@media (max-width: 900px) {

    /* UI Components preview */
    .pp-ui-play-intro {
        grid-template-columns: 1fr;
    }

    .pp-ui-play-button-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Illustration preview: reduce side padding at large tablet */
    .pp-illus-header,
    .pp-illus-strip {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ── Illustration Preview: compact tablet layout (768px–1024px) ──
   The canvas min-height (560px) is the dominant space consumer — all
   its content is position:absolute, so only min-height gives it height.
   Reduce canvas + header + strip without restructuring the composition.
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {

    .pp-illus-canvas {
        min-height: 360px !important;
    }

    .pp-illus-header {
        padding: 1.5rem 2rem 0 !important;
    }

    .pp-illus-header h2 {
        font-size: 1.8rem !important;
    }

    .pp-illus-strip {
        padding: 0.9rem 2rem !important;
    }
}

/* ── Palette Role preview: 5-col grid → 2-col ── */
@media (max-width: 860px) {

    .pp-role-prv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pp-role-prv-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Sticky toolbar: compact single-row layout at wider tablets ──
   Problem: bar ~873px total; at 800px viewport only 768px available.
   Solution: reduce min-widths, paddings, and gap; push swatch row to
   a second line via flex-wrap so the first row stays in one row.
   Desktop (>1024px) and mobile (<800px) are completely unaffected.
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 800px) and (max-width: 1024px) {

    /* Wrap to allow swatch second-row; tighten gap and padding */
    .pp-sticky-controls {
        flex-wrap: wrap;
        gap: var(--space-3);
        padding: var(--space-3);
    }

    /* When swatches are not visible: remove mini-row from flex flow entirely.
       Eliminates the wasted gap slot (saves ~12px of bar width). */
    .pp-sticky-mini-row:not(:has(.pp-mini-palette-group--visible)) {
        display: none;
    }

    /* When swatches become visible: push them to a full-width second row */
    .pp-sticky-mini-row {
        order: 10;
        flex-basis: 100%;
        justify-content: center;
    }

    /* Add separator line only when the swatch row is actually showing */
    .pp-sticky-mini-row:has(.pp-mini-palette-group--visible) {
        padding-top: var(--space-2);
        border-top: 1px solid var(--border-primary);
    }

    /* Vertical divider is meaningless in a centered row */
    .pp-sticky-mini-row .pp-mini-divider {
        display: none;
    }

    /* Compact dropdown cards */
    .tool-dropdown-card {
        min-width: 148px;
        padding: 0.6rem 0.75rem;
    }

    /* Safety net: truncate value text that exceeds the narrower card width */
    .tool-dropdown-value-left {
        min-width: 0;
        overflow: hidden;
    }

    .tool-dropdown-value-left > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Compact generate button */
    .pp-sticky-generate-row .pp-generate-btn-sticky {
        padding: var(--space-2) var(--space-3);
    }

    /* Compact secondary buttons */
    .pp-sticky-secondary-btn {
        padding: var(--space-1) var(--space-2);
    }
}

/* ── Color cards: single row across all tablet widths (769px–999px) ──
   Problem: 6 × 140px + 5 × 20px gap = 940px. Below 940px the cards
   wrap into a 4+2 orphan layout on all tablet viewports.
   Solution: flex fill + nowrap + hex overlay (same treatment as mobile
   since card widths 118–137px cannot fit the inline hex + icons bar).
   Desktop (≥1000px) and mobile (≤768px) are completely unaffected.
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 999px) {

    .pp-color-cards-wrap {
        gap: var(--space-3);
        flex-wrap: nowrap;
    }

    /* Cards fill the row equally; cap at desktop width at wider tablet sizes */
    .pp-color-card {
        flex: 1 1 0;
        min-width: 0;
        max-width: 140px;
        height: 160px;
    }

    /* Hex overlay: inline hex is unreadable at 118–137px card widths.
       Frosted overlay at swatch top shows the full hex at any width. */
    .pp-color-hex {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 0.62rem;
        color: rgba(0, 0, 0, 0.78);
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        padding: var(--space-1) var(--space-2);
        border-radius: 12px 12px 0 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        flex: none;
        z-index: 1;
        display: flex;
        justify-content: center;
    }

    /* Bottom bar: icons only, centred */
    .pp-color-bottom {
        justify-content: center;
    }
}


/* ========================================
   TABLET (≤768px)
   ======================================== */

/* ── Page gutters: tablet (768px–1024px) ──
   .pp-layout has no horizontal padding by default. At viewports below
   1000px the palette section and preview system expand to full width,
   touching screen edges. Adding padding-inline here propagates evenly
   to all direct children (cards, readability, preview) in one rule.
   Sticky bar is position:fixed and is unaffected.
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {

    .pp-layout {
        padding-inline: 24px;
    }

    /* Accessibility card: keep desktop flex-row layout, reduce padding and
       metric gap so the card fits within the narrower tablet container. */
    .pp-a11y-card {
        padding: var(--space-3) var(--space-4);
    }

    .pp-a11y-metrics {
        gap: var(--space-3);
    }
}

/* ── Page gutters: mobile (<768px) ──
   Tighter gutter than tablet — 16px each side gives comfortable breathing
   room without wasting scarce horizontal space on small screens.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .pp-layout {
        padding-inline: 16px;
    }
}

/* ── Illustration Preview: mobile-specific layout (<768px) ──
   The desktop composition (560px canvas + large headline) wastes too
   much vertical space on phone. Aggressively reduce every section.
   Swatches shrink to fit within narrow widths; hint text hidden.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .pp-illus-canvas {
        min-height: 200px !important;
    }

    .pp-illus-header {
        padding: 0.9rem 1.25rem 0 !important;
    }

    .pp-illus-header h2 {
        font-size: 1.3rem !important;
        letter-spacing: -0.015em !important;
        margin-bottom: 0.3rem !important;
    }

    .pp-illus-header p {
        font-size: 0.78rem !important;
    }

    .pp-illus-strip {
        padding: 0.7rem 1.25rem !important;
        gap: 0.45rem !important;
        flex-wrap: wrap !important;
    }

    /* Smaller swatches fit at 375px without wrapping */
    .pp-illus-strip > div {
        width: 20px !important;
        height: 20px !important;
        border-radius: 5px !important;
    }

    /* Hide secondary hint — not critical info, causes horizontal overflow risk */
    .pp-illus-strip > span:last-child {
        display: none !important;
    }
}

/* ── Desktop restore: inline sticky bar above 768px ── */
/* Companion to the ≤768px block. Restores the sticky bar
   to its desktop inline state at all widths above 768px.  */
@media (min-width: 769px) {

    .pp-settings-btn {
        display: none !important;
    }

    .pp-sticky-mini-row {
        display: flex;
        align-items: center;
        order: 0;
        min-height: 0;
    }

    .pp-sticky-generate-row {
        display: flex;
        align-items: center;
        order: 0;
    }

    .pp-sticky-generate-row .pp-sticky-actions {
        flex: none;
        width: auto;
        margin-left: var(--space-3);
    }

    .pp-sticky-generate-row .pp-generate-btn-sticky {
        width: auto;
        min-height: auto;
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }
}

/* ── Primary layout switch ── */
/* Hero, a11y section, color cards, sticky bar, bottom sheet */
@media (max-width: 768px) {

    /* Hero */
    .pp-hero {
        padding: var(--space-12) var(--space-4) var(--space-8);
    }

    .pp-hero-title {
        font-size: 2.5rem;
    }

    /* Accessibility card: stack header above metrics */
    .pp-a11y-card {
        flex-direction: column;
    }

    /* Collapse 4-column metrics to 2-column */
    .pp-a11y-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Color cards: compact size */
    .pp-color-cards-wrap {
        gap: var(--space-3);
    }

    .pp-color-card {
        width: 100px;
        height: 120px;
    }

    /* Hex code: frosted overlay at top of swatch */
    .pp-color-hex {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 0.62rem;
        color: rgba(0, 0, 0, 0.78);
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        padding: var(--space-1) var(--space-2);
        border-radius: 12px 12px 0 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        flex: none;
        z-index: 1;
        display: flex;
        justify-content: center;
    }

    /* Bottom bar: icons only (hex has moved to overlay) */
    .pp-color-bottom {
        justify-content: center;
    }

    .pp-color-copy,
    .pp-color-lock {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }

    /* Sticky bar: compact column layout */
    .pp-sticky-controls {
        flex-direction: column;
        align-items: stretch;
        width: calc(100vw - 2rem);
        gap: var(--space-2);
        padding: var(--space-3);
    }

    /* Generate row: full-width, first in stack */
    .pp-sticky-generate-row {
        order: -2;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
    }

    .pp-sticky-generate-row .pp-sticky-actions {
        flex: 1;
        margin-left: 0;
        width: auto;
    }

    .pp-generate-btn-sticky {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        padding: var(--space-3) var(--space-4);
        font-size: 1rem;
    }

    /* Secondary actions hidden from toolbar — live in bottom sheet */
    .pp-sticky-secondary-row {
        display: none;
    }

    /* Settings icon button (mobile-only) */
    .pp-settings-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 10px;
        border: 1px solid var(--border-primary);
        background: var(--surface-secondary);
        color: var(--text-primary);
        cursor: pointer;
        font-size: 1rem;
        flex-shrink: 0;
        transition: background var(--transition-fast);
    }

    .pp-settings-btn:hover {
        background: var(--surface-hover);
    }

    /* Mini palette row: only visible when swatches are active */
    .pp-sticky-mini-row {
        order: -1;
        display: none;
        align-items: center;
    }

    .pp-sticky-mini-row:has(.pp-mini-palette-group--visible) {
        display: flex;
    }

    .pp-sticky-mini-row .pp-mini-palette-group {
        flex: 1;
        overflow-x: auto;
        justify-content: flex-start;
        gap: var(--space-2);
    }

    .pp-sticky-mini-row .pp-mini-palette-group--visible {
        display: flex !important;
        justify-content: flex-start;
    }

    /* Dropdown cards hidden from toolbar — live in bottom sheet */
    .pp-sticky-controls .tool-dropdown-card {
        display: none;
    }

    /* Divider meaningless in column layout */
    .pp-mini-divider {
        display: none;
    }

    /* Bottom sheet: activate */
    .pp-bottom-sheet {
        display: flex;
    }
}

/* ── Internal preview layout collapse ── */
@media (max-width: 700px) {

    /* Preview panel padding */
    .pp-preview {
        padding: 1rem;
    }

    /* Desktop SaaS preview: stack all grid layouts */
    .pp-saas-hero,
    .pp-saas-dashboard,
    .pp-saas-content-grid {
        grid-template-columns: 1fr;
    }

    .pp-saas-nav {
        align-items: flex-start;
    }

    .pp-saas-nav-links {
        display: none;
    }

    .pp-saas-hero {
        padding: 1.5rem 1rem;
    }

    .pp-saas-h1 {
        font-size: 1.85rem;
    }

    .pp-saas-metrics {
        grid-template-columns: 1fr;
    }

    .pp-saas-sidebar {
        display: none;
    }

    /* UI Components preview: compress button and badge grids */
    .pp-ui-play-button-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pp-ui-play-badge-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Nav grid: drop pagination, keep tabs + crumbs + search */
    .pp-ui-play-nav-grid {
        grid-template-columns: 1fr auto auto;
    }
}


/* ========================================
   LARGE MOBILE (≤600px)
   ======================================== */

/* ── Hero scale step 2 ── */
@media (max-width: 600px) {

    .pp-hero {
        padding: var(--space-10) var(--space-4) var(--space-6);
    }

    .pp-hero-title {
        font-size: 2.25rem;
    }
}

/* ── UI Components and Role preview: compress grids ── */
@media (max-width: 540px) {

    /* UI Components */
    .pp-ui-play-button-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pp-ui-play-badge-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pp-ui-play-form-grid,
    .pp-ui-play-cards-grid,
    .pp-ui-play-alert-grid,
    .pp-ui-play-feedback-grid,
    .pp-ui-play-roles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Nav grid: keep tabs + crumbs only */
    .pp-ui-play-nav-grid {
        grid-template-columns: 1fr auto;
    }

    /* Table: keep name (col 1) + status (col 5), hide interior columns */
    .pp-ui-play-table-row {
        grid-template-columns: 1fr auto;
    }

    .pp-ui-play-table-row > *:nth-child(2),
    .pp-ui-play-table-row > *:nth-child(3),
    .pp-ui-play-table-row > *:nth-child(4) {
        display: none;
    }

    /* Palette Role preview: 2-col → single column */
    .pp-role-prv-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================
   MOBILE (≤430px)
   ======================================== */

@media (max-width: 430px) {

    /* Hero scale step 3 */
    .pp-hero {
        padding: var(--space-8) var(--space-4) var(--space-5);
    }

    .pp-hero-title {
        font-size: 2rem;
    }

    /* UI Components: single-column grids */
    .pp-ui-play-form-grid,
    .pp-ui-play-cards-grid,
    .pp-ui-play-alert-grid,
    .pp-ui-play-feedback-grid,
    .pp-ui-play-roles-grid {
        grid-template-columns: 1fr;
    }

    .pp-ui-play-badge-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ========================================
   SMALL MOBILE (≤375px)
   ======================================== */

/* ── Hero scale step 4 (final) ── */
@media (max-width: 375px) {

    .pp-hero {
        padding: var(--space-6) var(--space-4) var(--space-4);
    }

    .pp-hero-title {
        font-size: 1.75rem;
    }
}