/* Build Guide — Mobile & Responsive */

/* ============================================================
   1100px — Hide right rail, keep step-nav + main (2 col)
   ============================================================ */

@media (max-width: 1100px) {
    .guide-layout {
        grid-template-columns: var(--guide-nav-width) 1fr;
    }

    .guide-rail {
        display: none;
    }
}

/* ============================================================
   768px — Full mobile: single column, chip step-nav, accordion rail
   ============================================================ */

@media (max-width: 768px) {

    /* --- Grid: 1 column, step-nav moves to top of main --- */
    .guide-layout {
        grid-template-columns: 1fr;
    }

    /* --- Step navigator: horizontal chip row --- */
    .guide-stepnav {
        /* Remove sticky column positioning */
        position: static;
        max-height: none;
        /* Stretch across full viewport inside the main column */
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 8px 12px;
        /* Horizontal scroll row */
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        gap: 4px;
        align-items: center;
        background: var(--bg-secondary);
        /* Keep it sticky at the top below topbar + progress bar */
        /* Note: stepnav is inside .guide-layout which is below the sticky bars,
           so we use sticky inside .guide-main column context */
    }

    .guide-stepnav::-webkit-scrollbar {
        display: none;
    }

    /* Section labels irrelevant in chip mode */
    .guide-stepnav__section-label {
        display: none;
    }

    /* Each chip: circular touch target */
    .guide-stepnav__item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 4px;
        min-width: 40px;
        height: 40px;
        border-left: none;
        border-bottom: 2px solid transparent;
        border-radius: 50%;
        margin: 2px;
        background: none;
        /* Reset desktop hover that used full-width background */
        transition: background 0.12s, box-shadow 0.12s;
    }

    .guide-stepnav__item:hover {
        background: none;
    }

    /* Hide step title — only show number in chip */
    .guide-stepnav__title {
        display: none;
    }

    /* The number becomes the circle chip */
    .guide-stepnav__num {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 700;
        min-width: 32px;
        padding: 0;
        padding-top: 0;
        background: var(--bg-tertiary);
        color: var(--text-muted);
        transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }

    /* Active chip: accent fill */
    .guide-stepnav__item--active {
        border-left-color: transparent;
        border-bottom-color: transparent;
        background: none;
        box-shadow: none;
    }

    .guide-stepnav__item--active .guide-stepnav__num {
        background: var(--accent);
        color: #fff;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
    }

    /* Done chip: muted accent with checkmark overlay */
    .guide-stepnav__item--done {
        position: static;
    }

    /* Remove the desktop ::after checkmark — chip has its own treatment */
    .guide-stepnav__item--done::after {
        display: none;
    }

    .guide-stepnav__item--done .guide-stepnav__num {
        background: color-mix(in srgb, var(--accent) 20%, transparent);
        color: var(--accent);
        font-weight: 700;
        font-size: 0;   /* hide the number, show checkmark via pseudo */
        position: relative;
    }

    .guide-stepnav__item--done .guide-stepnav__num::after {
        content: '✓';
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--accent);
        position: absolute;
    }

    /* Unchecked dot marker — suppress on mobile (just grey chip) */
    .guide-stepnav__item--unchecked .guide-stepnav__num::after {
        display: none;
    }

    /* --- Progress bar: taller + prominent centered label --- */
    .guide-page {
        --guide-progressbar-h: 36px;
    }

    .guide-progress-bar {
        height: var(--guide-progressbar-h);
        justify-content: center;
    }

    .guide-progress-bar__label {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-primary);
        text-align: center;
    }

    /* --- Topbar adjustments --- */
    .guide-topbar__price {
        display: none;
    }

    .guide-topbar__build-name {
        max-width: 160px;
        font-size: 0.875rem;
    }

    /* Action buttons: icon-only (hide text spans) */
    .guide-btn span {
        display: none;
    }

    .guide-btn svg {
        display: block;
    }

    /* Mode toggle: compact text */
    .guide-mode-toggle__btn {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    /* --- Guide main: tighter padding, no side border --- */
    .guide-main {
        padding: 16px;
        padding-bottom: calc(var(--guide-bottom-nav-h) + 16px);
        border-right: none;
    }

    /* --- Step cards: full width, subtle shadow --- */
    .guide-step {
        box-shadow: 0 1px 4px color-mix(in srgb, var(--text-primary) 8%, transparent);
        border-radius: var(--radius-sm, 6px);
        padding: 14px;
        margin-bottom: 20px;
    }

    /* --- Step header: grid layout for clean 2-row structure --- */
    .guide-step__header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 4px 8px;
        margin-bottom: 10px;
    }

    .guide-step__meta {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    /* --- Step title: slightly smaller --- */
    .guide-step__title {
        grid-column: 1;
        grid-row: 2;
        font-size: clamp(0.9375rem, 3.5vw + 0.25rem, 1.125rem);
        flex: unset;
    }

    /* --- Complete button: larger touch target, grid row 2 --- */
    .guide-step__complete {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        min-height: 30px;
        min-width: 30px;
        padding: 4px 10px;
        font-size: 0.6875rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Step meta pill: smaller --- */
    .guide-step__meta-pill {
        font-size: 0.6rem;
        padding: 2px 6px;
        letter-spacing: 0.06em;
    }

    /* --- Remove huge empty space below step content in work mode --- */
    .guide-layout {
        min-height: auto;
    }

    /* --- Step list footer: sticky at bottom of overlay --- */
    .guide-steplist__footer {
        position: sticky;
        bottom: 0;
        background: var(--bg-secondary);
        z-index: 1;
    }

    /* --- Rail: collapsible section below step content --- */
    .guide-rail {
        display: block;
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0 16px 16px;
        border-top: 1px solid var(--border);
        margin-top: 24px;
    }

    /* Toggle header for the rail accordion (Alpine x-show driven) */
    .guide-rail__toggle-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        border: none;
        background: none;
        width: 100%;
        text-align: left;
    }

    .guide-rail__toggle-header svg {
        transition: transform 0.2s;
        color: var(--text-muted);
        flex-shrink: 0;
    }

    .guide-rail__toggle-header[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    .guide-rail__title {
        margin-bottom: 8px;
    }

    /* Rail parts: full width cards */
    .guide-rail__part {
        padding: 10px 12px;
    }

    /* --- Photo: enable pinch-zoom --- */
    .guide-photo {
        touch-action: pinch-zoom;
    }

    /* --- Bottom nav: fixed, safe-area aware --- */
    .guide-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* --- Vendor/OS tabs: snap scroll --- */
    .guide-vendor-tabs__nav,
    .guide-os-tabs__nav {
        scroll-snap-type: x mandatory;
    }

    .guide-vendor-tabs__btn,
    .guide-os-tabs__btn {
        scroll-snap-align: start;
    }
}

/* ============================================================
   480px — Small phones: tighter topbar, even smaller chips
   ============================================================ */

@media (max-width: 480px) {

    /* Topbar: truncate build name more aggressively */
    .guide-topbar__build-name {
        max-width: 130px;
        font-size: 0.8125rem;
    }

    /* Mode toggle: smallest form */
    .guide-mode-toggle {
        padding: 2px;
        gap: 1px;
    }

    .guide-mode-toggle__btn {
        padding: 3px 6px;
        font-size: 0.6875rem;
    }

    /* Chips: slightly more compact */
    .guide-stepnav {
        padding: 6px 8px;
        gap: 2px;
    }

    .guide-stepnav__item {
        min-width: 36px;
        height: 36px;
        padding: 2px;
    }

    .guide-stepnav__num {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.6875rem;
    }

    /* Guide main: minimal padding */
    .guide-main {
        padding: 12px;
        padding-bottom: calc(var(--guide-bottom-nav-h) + 12px);
    }

    /* Step card: reduce internal padding */
    .guide-step {
        padding: 12px;
        margin-bottom: 16px;
    }
}

/* ============================================================
   Landscape phone — small vertical space
   ============================================================ */

@media (max-height: 500px) and (orientation: landscape) {

    /* Tighter topbar */
    .guide-page {
        --guide-topbar-h: 44px;
    }

    /* Hide step chip nav — not enough vertical room */
    .guide-stepnav {
        display: none;
    }

    /* Bottom nav: slimmer */
    .guide-bottom-nav {
        height: 44px;
        padding-top: 6px;
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }

    .guide-bottom-nav__next,
    .guide-bottom-nav__prev {
        height: 36px;
    }

    /* Compact progress bar */
    .guide-page {
        --guide-progressbar-h: 28px;
    }
}

/* ============================================================
   480px — Celebration popup: fit on small screens
   ============================================================ */

@media (max-width: 480px) {
    .guide-celebrate__panel {
        max-height: 90vh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 20px 16px !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    }

    .guide-celebrate__stats {
        grid-template-columns: 1fr 1fr;
    }

    .guide-celebrate__stats dd {
        font-size: 0.8125rem;
    }

    .guide-celebrate__emoji {
        font-size: 2rem;
    }

    .guide-celebrate__title {
        font-size: 1.125rem;
    }

    .guide-celebrate__cta {
        flex-direction: column;
    }

    .guide-celebrate__cta button,
    .guide-celebrate__cta a {
        width: 100%;
        justify-content: center;
    }
}