/* Split-screen snap-picker for Threads & Fits.
   Top = scrollable output values; bottom = FIXED picker wheels that never
   scroll away. The SVG drawing is hidden unless the view has .viz-on.
   Tokens come from base.css (light/dark). */

:root {
    --picker-row: 44px;        /* MUST match SnapPicker rowH default */
    --picker-gap: 6px;
    --picker-deck-h: calc(var(--picker-row) * 5); /* selected + 2 above/below */
}

/* Lock the view: the view itself NEVER scrolls — only the .picker-output
   inside it does. This is what keeps the deck pinned at the bottom while the
   output above scrolls independently.

   IMPORTANT: the view sits BELOW the app header inside body's flex column.
   Using height:100vh would make view+header exceed the viewport and force the
   body to scroll (pushing the deck below the fold on load). So we take the
   REMAINING height via flex:1 + min-height:0, and lock the body too. */
body:has(#view-thread.picker-view.active),
body:has(#view-fits.picker-view.active) {
    height: 100vh;
    overflow: hidden;            /* body never scrolls while a picker view is active */
}

/* main is body's flex column item — let it absorb all height left after the
   header. main keeps its mobile padding-bottom (the bottom-nav reservation from
   tabs.css), so the view below fills EXACTLY from the header to the top of the
   bottom nav, leaving the deck fully visible just above the nav. */
body:has(#view-thread.picker-view.active) > main,
body:has(#view-fits.picker-view.active) > main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* main is display:block, so a child's `flex` is inert — size the view with
   height instead. 100% of main's content box = the gap between header and nav,
   on any phone. (#id wins specificity over .view-content's height:100vh.) */
#view-thread.picker-view,
#view-fits.picker-view {
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ─── SVG canvas: hidden unless the user toggles it on (.viz-on) ───────── */
/* Use the same IDs as thread.css/fits.css (#view-thread/#view-fits) so this
   wins specificity over their `#view-x .canvas-section { display:flex }`. */
#view-thread.picker-view .canvas-section,
#view-fits.picker-view .canvas-section {
    display: none;
    flex: 0 0 38%;
    border-bottom: 1px solid var(--border);
    order: 1;                  /* top-most when shown */
}
#view-thread.picker-view.viz-on .canvas-section,
#view-fits.picker-view.viz-on .canvas-section {
    display: flex;
}

/* ─── top region: scrollable output (scrolls independently of the deck) ── */
/* Flexes to fill EXACTLY the space the fixed deck leaves below it — so on any
   phone the upper output meets the top of the deck with no gap and the deck is
   never pushed off-screen. Content beyond the available height scrolls inside.
   Shares the deck-wrap's bg so the two read as ONE connected surface — no seam
   between the output and the picker below it. */
.picker-output {
    flex: 1 1 0;                /* grow to fill leftover height above the deck */
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-surface);
    padding: 12px 14px 4px;
    order: 2;                   /* above the deck */
}

/* ─── bottom region: FIXED picker deck — thumb-reach, never scrolls away ─ */
/* Visually continuous with the output above: same bg, NO border-top, NO shadow
   — so output + deck + favorites read as one solid block sitting flush on the
   nav. Tightened padding/gaps so the whole block sits higher ("too low"). */
.picker-deck-wrap {
    flex: 0 0 auto;           /* fixed height, does NOT grow/shrink with scroll */
    display: flex;
    flex-direction: column;
    padding: 4px 8px calc(4px + var(--safe-bottom));
    gap: 4px;
    background: var(--bg-surface);
    order: 3;                   /* bottom — where the thumb is */
}

/* On mobile the deck sits directly above the bottom nav — the nav carries
   the safe-area inset, so drop it here to avoid a gap between deck and nav. */
@media (max-width: 768px) {
    .picker-deck-wrap {
        padding-bottom: 0;
    }
}

/* ─── compact "important info" summary shown first at the top ──────────── */
/* One-line hero of the key result so there's little to scroll past before
   the rest of the detail. */
.picker-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.picker-summary .sum-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.picker-summary .sum-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.picker-summary .sum-val {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── the deck: a row of columns + a centred highlight band ────────────── */
/* Same bg as the wrap (bg-surface) + no border, so the wheel area connects
   seamlessly to the output above and favorites below instead of reading as a
   separate inset box. The centre highlight band still marks the selection. */
.picker-deck {
    flex: 0 0 var(--picker-deck-h);   /* fixed wheel height (see --picker-deck-h) */
    min-height: 0;
    display: flex;
    gap: var(--picker-gap);
    position: relative;        /* anchor for the centre band */
    background: var(--bg-surface);
    padding: 0 4px;
}

/* single centred highlight band, drawn by the deck so it never moves */
.picker-deck::before {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: var(--picker-row);
    transform: translateY(-50%);
    background: var(--bg-surface);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 6px rgba(108, 99, 255, 0.15);
    pointer-events: none;
    z-index: 1;
}

.picker-col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 2;                /* above the band */
}
.picker-col::-webkit-scrollbar { display: none; }

/* spacer so first/last real rows can reach the vertical centre.
   Height = half the column (calc against the col's own height). */
.picker-pad {
    height: calc(50% - var(--picker-row) / 2);
    flex: 0 0 auto;
    pointer-events: none;
}

.picker-row {
    height: var(--picker-row);
    flex: 0 0 auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font: 600 15px 'Inter', sans-serif;
    color: var(--text-muted);
    opacity: 0.4;
    transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
}
.picker-row.active {
    opacity: 1;
    color: var(--primary);
    transform: scale(1.04);
}
.picker-row-label { line-height: 1; }
.picker-row-tag {
    font-size: 9px;
    font-weight: 700;
    opacity: 0.6;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
}

/* a column can be hidden when not applicable (e.g. pitch for single-pitch norms) */
.picker-col.is-hidden,
.picker-col-wrap.is-hidden { display: none; }

/* wrapper: caption + scroll column, flexes to fill the deck */
.picker-col-wrap {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}
.picker-col-wrap .picker-col { flex: 1; }

/* small caption above each column */
.picker-col-cap {
    position: absolute;
    top: 4px;
    left: 0; right: 0;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    opacity: 0.55;
    pointer-events: none;
    z-index: 3;
}

/* ─── compact output card (top pane) ───────────────────────────────────── */
/* Re-skin the existing .results-card content for a light, dense layout. */
.picker-output .results-card {
    background: none;
    color: var(--text-main);
    box-shadow: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
.picker-output .results-card::before { display: none; }

.picker-output .thr-section-label {
    margin-top: 10px;
    color: var(--text-muted);
    opacity: 0.8;
}
.picker-output .thr-section-label:first-child { margin-top: 0; }

.picker-output .res-row {
    font-size: 13px;
    opacity: 1;
    align-items: baseline;
}
.picker-output .res-label {
    font-size: 11px;
    opacity: 0.65;
}
.picker-output .res-val {
    font-size: 16px;
    text-shadow: none;
    color: var(--text-main);
    font-weight: 700;
}

/* hero metrics: pitch / drill / major-d get a prominent strip */
.picker-output .machining-head {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.picker-output .mach-val { font-size: 28px; color: var(--primary); }
.picker-output .drill-highlight {
    background: var(--bg-app);
    border: 1px solid var(--border);
}
.picker-output .drill-val { font-size: 22px; color: var(--accent-tri); }

/* ─── toolbar row above the deck (ext/int toggle, unit, show-all) ──────── */
.picker-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.picker-toolbar .mode-switch { flex: 1; margin-bottom: 0; }
.picker-toolbar .thr-unit-toggle { margin-bottom: 0; flex: 0 0 auto; }
.picker-output-toggle {
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font: 600 12px 'Inter', sans-serif;
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto;
}

/* ─── advanced disclosure (free-text fallback) ─────────────────────────── */
.picker-advanced {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.picker-advanced summary {
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    opacity: 0.8;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.picker-advanced summary::-webkit-details-marker { display: none; }
.picker-advanced summary::after {
    content: '▾';
    margin-left: auto;
    transition: transform var(--transition-fast);
    opacity: 0.6;
}
.picker-advanced[open] summary::after { transform: rotate(180deg); }
.picker-advanced .adv-body { padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }

/* ─── recent strip (kept from chips.css .recent-row) ───────────────────── */
.picker-recents {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
}
.picker-recents .chip-label {
    margin: 0;
    flex: 0 0 auto;
    font-size: 10px;
}
.picker-recents .recent-row { flex: 1; overflow-x: auto; flex-wrap: nowrap; }