/* ==========================================================================
   Visual interest picker
   Popup of activity tiles behind <x-interest-icon-picker>.
   Colour tokens deliberately mirror .cp-tag-pill in site.css (#3b71ca light /
   #8ab4f8 under [data-cp-theme="dark"]) so the picker matches the rest of the
   app in both themes.
   ========================================================================== */

/* Symbol sheet for the no-emoji catalog items — present in the DOM, never seen. */
.cp-interest-svg-sheet {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Trigger ------------------------------------------------------------- */

.cp-interest-picker-trigger-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-size: .75rem;
    min-width: 1.6rem;
}

/* Row of committed picks. Wraps, because it lists every selection rather than
   a truncated few — each one has to be removable. The top padding is headroom
   for the remove buttons, which overhang their tile. */
/* Centred, so however many fixed-width tiles fit on a row, the leftover space
   splits evenly either side instead of all piling up on the right. Tiles keep
   their own size — only the row's alignment changes. */
.cp-interest-picker-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .5rem .4rem .1rem;
    line-height: 1;
}

/* Fixed box, never sized by its contents: emoji advance widths and label
   lengths both differ enough that content-sized boxes come out as a mix of
   squares and rectangles. No `overflow: hidden` here — the remove button
   overhangs the corner by design, and clipping it lops the button in half.
   Label clamping is handled on the label itself instead. */
.cp-interest-picker-preview-item {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    flex: 0 0 auto;
    width: 4.75rem;
    height: 4.6rem;
    padding: .35rem .25rem;
    border: 1px solid var(--cp-border, rgba(255, 255, 255, .12));
    border-radius: .5rem;
    background: rgba(255, 255, 255, .05);
}

/* Deliberately smaller than the tile labels in the popup — this strip is a
   reminder of what is picked, not the picking surface. */
.cp-interest-picker-preview-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    font-size: .58rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

/* No type size of its own: glyphs render at the shared `.cp-interest-glyph`
   scale, which is what this strip has always used. */
.cp-interest-picker-preview-glyph {
    display: inline-flex;
    line-height: 1;
}

/* Overhangs the top-right corner of its tile. Sized for a comfortable tap
   target; the strip's top padding is the headroom that keeps it off the
   element above. */
.cp-interest-picker-preview-remove {
    position: absolute;
    top: -.4rem;
    right: -.4rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .45);
    border-radius: 50%;
    background: var(--cp-danger, #ff4d6d);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    opacity: .9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
    transition: opacity .15s ease, transform .15s ease;
}

.cp-interest-picker-preview-remove:hover,
.cp-interest-picker-preview-remove:focus-visible {
    opacity: 1;
    transform: scale(1.12);
}

.cp-interest-picker-preview-remove:focus-visible {
    outline: 2px solid var(--cp-accent, #00d4ff);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .cp-interest-picker-preview-remove {
        transition: none;
    }

    .cp-interest-picker-preview-remove:hover,
    .cp-interest-picker-preview-remove:focus-visible {
        transform: none;
    }
}

.cp-interest-picker-preview-glyph .cp-interest-glyph--svg svg,
.cp-interest-picker-preview-glyph .cp-interest-glyph--fa {
    color: #3b71ca;
}

/* --- Modal shell --------------------------------------------------------- */

/* Portaled to <body> by cp-interest-picker.js; 1065 clears the app's own
   stacked backdrops, same as .cp-tag-picker-modal. */
.cp-interest-picker-modal {
    z-index: 1065;
}

/* Frosted background: the page behind the popup blurs out, not just dims.
   The blur lives on the modal element itself, not only on `.modal-backdrop`.
   The backdrop rule alone was unreliable — it depends on `:has()` plus the
   backdrop actually being body's last `.modal-backdrop`, and this app stacks
   its own backdrops. `.cp-interest-picker-modal` is always present, always
   covers the viewport, and always sits above both the backdrop and the page,
   so blurring it frosts the whole composite beneath. */
.cp-interest-picker-modal.show {
    -webkit-backdrop-filter: blur(14px) saturate(115%) brightness(.82);
    backdrop-filter: blur(14px) saturate(115%) brightness(.82);
}

body:has(> .cp-interest-picker-modal.show) > .modal-backdrop:last-of-type {
    z-index: 1060;
    --bs-backdrop-opacity: .45;
}

/* 80% of the viewport in both axes, centred both ways.
   The height cap goes on `.modal-content`, NOT the dialog: `modal-dialog-centered`
   forces the dialog to `min-height: calc(100% - margin*2)`, which overrides any
   height set here — so capping the dialog both failed to shrink the popup and
   left it sitting against the top of that full-height box. Capping the content
   lets the centred flex dialog park it in the middle. */
.cp-interest-picker-modal .modal-dialog {
    max-width: 80vw;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
}

.cp-interest-picker-modal .modal-content {
    max-height: 80vh !important;
}

.cp-interest-picker-modal .modal-body {
    padding-top: 0;
}

/* 80vw on a phone leaves tiles too narrow to read — widen slightly there. */
@media (max-width: 575.98px) {
    .cp-interest-picker-modal .modal-dialog {
        max-width: 92vw;
        width: 92vw;
        margin: .75rem auto;
    }

    .cp-interest-picker-modal .modal-content {
        max-height: 85vh !important;
    }
}

/* Deep 3D shell. Deliberately dark in BOTH themes — this is a full-screen
   overlay over a blurred page, and the tile grid reads best on a dark field.
   The app themes .modal-content directly (not via --bs-modal-bg), and
   cp-shell.css is linked a second time after this file, so these need
   !important to hold the cascade. */
.cp-interest-picker-modal .modal-content {
    /* Flat stand-in for the shell gradient at the height the sticky bands sit. */
    --cp-interest-surface: #16223a;
    --cp-interest-accent: var(--cp-accent, #00d4ff);

    background: linear-gradient(180deg, #1a2740 0%, #101a2b 52%, #0a1120 100%) !important;
    border: 1px solid rgba(0, 212, 255, .22) !important;
    border-radius: 1.15rem;
    color: rgba(255, 255, 255, .92);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, .72),
        0 12px 28px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .12),
        inset 0 -22px 44px rgba(0, 0, 0, .42) !important;
}

.cp-interest-picker-modal .modal-header,
.cp-interest-picker-modal .modal-footer {
    border-color: rgba(255, 255, 255, .1) !important;
    background: transparent !important;
    color: inherit;
}

/* Raised header lip + recessed footer, so the shell reads as a physical tray. */
.cp-interest-picker-modal .modal-header {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .35);
}

.cp-interest-picker-modal .modal-footer {
    background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .34)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.cp-interest-picker-modal .modal-title {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.cp-interest-picker-modal .btn-close {
    filter: invert(1) grayscale(1) brightness(1.8);
    opacity: .7;
}

.cp-interest-picker-modal .btn-close:hover {
    opacity: 1;
}

/* --- Toolbar ------------------------------------------------------------- */

/* The sticky toolbar and group headers need an opaque band matching the modal
   surface, or tiles scroll visibly underneath them. */

.cp-interest-picker-toolbar,
.cp-interest-group-title {
    background-color: var(--cp-interest-surface) !important;
}

/* Sticky so the filter stays reachable while scrolling a 150-tile grid. */
.cp-interest-picker-toolbar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .75rem 0 .5rem;
}

.cp-interest-picker-search-wrap {
    position: relative;
    flex: 1 1 16rem;
    min-width: 0;
}

.cp-interest-picker-search {
    padding-left: 2.25rem;
}

.cp-interest-picker-search-icon {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .55;
    font-size: .85rem;
}

.cp-interest-picker-count {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- Groups -------------------------------------------------------------- */

.cp-interest-group + .cp-interest-group,
.cp-interest-legacy {
    margin-top: 1.25rem;
}

.cp-interest-group-title {
    position: sticky;
    top: 3.5rem;
    z-index: 2;
    margin: 0 0 .5rem;
    padding: .3rem 0;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .75;
}

/* --- Tiles --------------------------------------------------------------- */

.cp-interest-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: .5rem;
}

.cp-interest-tile-item {
    min-width: 0;
}

/* Raised face over the dark shell: gradient top-light, hard under-bevel,
   inset highlight. Same physical language as .cp-btn. */
.cp-interest-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    height: 100%;
    min-height: 5.25rem;
    padding: .6rem .35rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .02) 55%, rgba(0, 0, 0, .12) 100%);
    color: #dce7f7 !important;
    cursor: pointer;
    text-align: center;
    box-shadow:
        0 2px 0 rgba(0, 0, 0, .45),
        0 6px 14px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .1);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
        transform .15s ease, box-shadow .15s ease;
}

.cp-interest-tile:hover {
    border-color: rgba(0, 212, 255, .45);
    background: linear-gradient(180deg, rgba(0, 212, 255, .16) 0%, rgba(0, 212, 255, .05) 100%);
    transform: translateY(-2px);
    box-shadow:
        0 4px 0 rgba(0, 0, 0, .5),
        0 12px 22px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* Pressed-in while the pointer is down — completes the physical read. */
.cp-interest-tile:active {
    transform: translateY(1px);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, .45),
        0 3px 8px rgba(0, 0, 0, .4),
        inset 0 2px 6px rgba(0, 0, 0, .35);
}

/* One fixed glyph slot for every tile, whatever the glyph is, so labels line up
   across a row. Drawn symbols get a slightly larger box than the emoji type
   size: their artwork is normalised to ~94% of the viewBox (see the size
   convention in _interest-icon-svgs.blade.php), so an equal box would render
   them visibly smaller than the emoji beside them. */
.cp-interest-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.05rem;
    font-size: 1.9rem;
    line-height: 1;
}

.cp-interest-glyph--svg svg,
.cp-interest-glyph--fa,
.cp-interest-glyph--fallback {
    width: 2.05rem;
    height: 2.05rem;
    font-size: 1.7rem;
}

.cp-interest-tile-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Corner tick, revealed only when checked. */
.cp-interest-tile-check {
    position: absolute;
    top: .3rem;
    right: .35rem;
    font-size: .8rem;
    opacity: 0;
    transition: opacity .15s ease;
}

/* Selected: bright cyan face with near-black ink and a glow ring — reads as
   unmistakably "on" against the dark shell, unlike the old pale blue fill. */
.btn-check:checked + .cp-interest-tile {
    background: linear-gradient(180deg, #7ff0ff 0%, #22c9f0 48%, #00a8d0 100%);
    border-color: #a6f5ff;
    color: #04141e !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
    transform: translateY(-1px);
    box-shadow:
        0 0 0 2px rgba(0, 212, 255, .55),
        0 3px 0 #007ea0,
        0 10px 24px rgba(0, 212, 255, .32),
        inset 0 1px 0 rgba(255, 255, 255, .65);
}

.btn-check:checked + .cp-interest-tile:hover {
    border-color: #ffffff;
    box-shadow:
        0 0 0 2px rgba(0, 212, 255, .75),
        0 4px 0 #007ea0,
        0 14px 30px rgba(0, 212, 255, .42),
        inset 0 1px 0 rgba(255, 255, 255, .7);
}

.btn-check:checked + .cp-interest-tile .cp-interest-tile-check {
    opacity: 1;
    color: #04141e;
}

.btn-check:focus-visible + .cp-interest-tile {
    outline: 2px solid var(--cp-accent, #00d4ff);
    outline-offset: 2px;
}

/* --- Legacy free-text interests ------------------------------------------ */

.cp-interest-legacy-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.cp-interest-legacy-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .5rem .25rem .7rem;
    border: 1.5px dashed rgba(0, 212, 255, .45);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: #9fe9ff;
    font-size: .8rem;
}

.cp-interest-legacy-remove {
    border: 0;
    background: none;
    padding: 0 .15rem;
    color: inherit;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}

.cp-interest-legacy-remove:hover {
    opacity: 1;
}

/* --- Text inside the always-dark shell ----------------------------------- */

/* The shell is dark in both themes, so anything the app themes for a light
   page (muted helper text, the filter field) has to be restated here.
   Tiles are <label> elements and site.css carries a blanket
   `[data-cp-theme="dark"] label { color: #ccc !important }`, which is why the
   tile colours above are !important. */
.cp-interest-picker-modal .modal-body,
.cp-interest-picker-modal .cp-interest-group-title {
    color: rgba(255, 255, 255, .9);
}

.cp-interest-picker-modal .text-muted,
.cp-interest-picker-modal .cp-interest-picker-count {
    color: rgba(255, 255, 255, .62) !important;
}

.cp-interest-picker-modal .cp-interest-picker-search {
    background-color: rgba(0, 0, 0, .35);
    border-color: rgba(255, 255, 255, .16);
    color: #fff;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
}

.cp-interest-picker-modal .cp-interest-picker-search::placeholder {
    color: rgba(255, 255, 255, .45);
}

.cp-interest-picker-modal .cp-interest-picker-search:focus {
    border-color: rgba(0, 212, 255, .55);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 0 0 .2rem rgba(0, 212, 255, .22);
}

/* --- Dark theme ---------------------------------------------------------- */

[data-cp-theme="dark"] .cp-interest-picker-preview-glyph .cp-interest-glyph--svg svg,
[data-cp-theme="dark"] .cp-interest-picker-preview-glyph .cp-interest-glyph--fa {
    color: #8ab4f8;
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .cp-interest-tile,
    .cp-interest-tile-check {
        transition: none;
    }

    .cp-interest-tile:hover,
    .cp-interest-tile:active,
    .btn-check:checked + .cp-interest-tile {
        transform: none;
    }
}