/* theme-picker.css — the first-visit theme picker (components/theme-picker.xjs,
   js/theme-picker.js). A modal with a scroll-snapping carousel: each slide is
   a card in its theme's own page colour and typeface, with a picture, a
   title and year, and a plain description. --tp-rel (set by the script) is
   the slide's offset from the middle in slide widths; the picture, the
   backdrop pattern and the text move at different rates against it. */
.theme-picker .modal-dialog { max-width: min(96vw, 860px); }
.theme-picker .modal-body { padding: 14px 0 10px; overflow: hidden; }
.theme-picker .tp-kicker {
    margin: 0 20px 2px;
    color: var(--accent-2);
    font-size: 1.25em;
    font-weight: bold;
    letter-spacing: .02em;
}
.theme-picker .tp-lede { margin: 0 20px 12px; color: var(--text-muted); }
.theme-picker .tp-carousel { position: relative; display: flex; align-items: center; }
.theme-picker .tp-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 34px; height: 54px; padding: 0;
    font-family: var(--font-cp437); font-size: 1.1em; line-height: 1;
    color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent-deep); border-radius: var(--radius-4);
    cursor: pointer; opacity: .9;
}
.theme-picker .tp-arrow:hover { opacity: 1; }
.theme-picker .tp-prev { left: 6px; }
.theme-picker .tp-next { right: 6px; }
.theme-picker .tp-track {
    display: flex; gap: 18px; align-items: stretch;
    width: 100%;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 8px calc(50% - var(--tp-slide-w) / 2) 14px;
    --tp-slide-w: min(380px, 78vw);
    outline: none;
}
.theme-picker .tp-track::-webkit-scrollbar { display: none; }
.theme-picker .tp-slide {
    --tp-rel: 0; --tp-abs: 0;
    position: relative; flex: 0 0 var(--tp-slide-w); min-height: 300px;
    scroll-snap-align: center;
    overflow: hidden;
    border: 2px solid var(--border);
    border-radius: var(--radius-8);
    background: var(--tp-color);
    color: #ffffff;
    font-family: var(--tp-font);
    cursor: pointer;
    transform: scale(calc(1 - var(--tp-abs) * .08));
    opacity: calc(1 - var(--tp-abs) * .45);
    transition: border-color .15s;
}
.theme-picker .tp-slide.tp-light { color: #000000; }
.theme-picker .tp-slide[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-deep); }
.theme-picker .tp-slide-bg {
    position: absolute; inset: -20% -30%;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 6px, transparent 6px 18px);
    transform: translateX(calc(var(--tp-rel) * 36px));
    pointer-events: none;
}
.theme-picker .tp-light .tp-slide-bg { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .06) 0 6px, transparent 6px 18px); }
.theme-picker .tp-slide-art-wrap {
    position: relative; display: flex; justify-content: center; padding: 18px 12px 6px;
    transform: translateX(calc(var(--tp-rel) * -44px));
}
.theme-picker .tp-slide-art { width: 256px; max-width: 80%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25)); }
.theme-picker .tp-slide-text {
    position: relative; padding: 4px 18px 16px; text-align: center;
    transform: translateX(calc(var(--tp-rel) * -16px));
}
.theme-picker .tp-slide-title { font-size: 1.35em; font-weight: bold; line-height: 1.15; }
.theme-picker .tp-year { font-weight: normal; opacity: .8; }
.theme-picker .tp-slide-name { font-size: .8em; opacity: .75; margin: 2px 0 6px; letter-spacing: .06em; text-transform: uppercase; }
.theme-picker .tp-slide-blurb { font-size: .95em; line-height: 1.35; opacity: .95; }
.theme-picker .tp-dots { display: flex; justify-content: center; gap: 6px; padding: 2px 20px 0; }
.theme-picker .tp-dot { width: 10px; height: 10px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: transparent; cursor: pointer; }
.theme-picker .tp-dot.is-active { background: var(--accent); border-color: var(--accent); }
.theme-picker .tp-step-done { padding: 6px 20px 10px; }
.theme-picker .tp-done-title { font-size: 1.2em; font-weight: bold; color: var(--accent-2); margin: 0 0 8px; }
.theme-picker .tp-done-text { margin: 0; color: var(--text); }
@media (prefers-reduced-motion: reduce) {
    .theme-picker .tp-slide, .theme-picker .tp-slide-bg, .theme-picker .tp-slide-art-wrap, .theme-picker .tp-slide-text { transform: none; }
}
@media (max-width: 599.98px) {
    .theme-picker .tp-arrow { display: none; }
    .theme-picker .tp-slide { min-height: 260px; }
}