/* ══════════════════════════════════════════════════════════
   Smart Page Search — stylesheet
   ══════════════════════════════════════════════════════════ */

/* ── Custom properties (easy theming) ── */
.sps-wrapper {
    --sps-accent      : #2563eb;       /* primary blue */
    --sps-accent-h    : #1d4ed8;
    --sps-bg          : #ffffff;
    --sps-surface     : #f8fafc;
    --sps-border      : #e2e8f0;
    --sps-border-f    : #93c5fd;
    --sps-text        : #1e293b;
    --sps-muted       : #64748b;
    --sps-mark-bg     : #fef08a;
    --sps-mark-text   : #713f12;
    --sps-radius      : 10px;
    --sps-shadow      : 0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    --sps-font        : -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sps-transition  : 0.18s ease;

    position      : relative;
    max-width     : 560px;
    width         : 100%;
    font-family   : var(--sps-font);
    font-size     : 15px;
    color         : var(--sps-text);
    box-sizing    : border-box;
}

.sps-wrapper *,
.sps-wrapper *::before,
.sps-wrapper *::after {
    box-sizing : inherit;
}

/* ── Tabs ── */
.sps-tabs {
    display        : flex;
    gap            : 2px;
    margin-bottom  : 8px;
    background     : var(--sps-surface);
    border         : 1px solid var(--sps-border);
    border-radius  : var(--sps-radius);
    padding        : 3px;
}

.sps-tab {
    flex           : 1;
    padding        : 7px 14px;
    border         : none;
    border-radius  : calc(var(--sps-radius) - 3px);
    background     : transparent;
    color          : var(--sps-muted);
    font-size      : 13px;
    font-weight    : 500;
    cursor         : pointer;
    transition     : background var(--sps-transition), color var(--sps-transition);
    white-space    : nowrap;
    line-height    : 1.4;
}

.sps-tab:hover {
    background : var(--sps-border);
    color      : var(--sps-text);
}

.sps-tab--active {
    background  : var(--sps-bg);
    color       : var(--sps-accent);
    font-weight : 600;
    box-shadow  : 0 1px 4px rgba(0,0,0,.08);
}

/* ── Input row ── */
.sps-input-row {
    display        : flex;
    align-items    : center;
    background     : var(--sps-bg);
    border         : 1.5px solid var(--sps-border);
    border-radius  : var(--sps-radius);
    padding        : 0 12px;
    gap            : 8px;
    transition     : border-color var(--sps-transition), box-shadow var(--sps-transition);
}

.sps-input-row:focus-within {
    border-color : var(--sps-border-f);
    box-shadow   : 0 0 0 3px rgba(37,99,235,.12);
}

.sps-icon {
    color       : var(--sps-muted);
    flex-shrink : 0;
    display     : flex;
    align-items : center;
}

.sps-input {
    flex        : 1;
    border      : none;
    outline     : none;
    background  : transparent;
    font-size   : 15px;
    color       : var(--sps-text);
    padding     : 11px 0;
    min-width   : 0;
    font-family : var(--sps-font);
}

.sps-input::placeholder { color: var(--sps-muted); }

/* Remove browser default search clear button */
.sps-input::-webkit-search-cancel-button { display: none; }
.sps-input::-ms-clear { display: none; }

.sps-clear {
    flex-shrink  : 0;
    display      : flex;
    align-items  : center;
    justify-content: center;
    border       : none;
    background   : transparent;
    color        : var(--sps-muted);
    cursor       : pointer;
    padding      : 4px;
    border-radius: 50%;
    transition   : background var(--sps-transition), color var(--sps-transition);
}

.sps-clear:hover {
    background : var(--sps-surface);
    color      : var(--sps-text);
}

/* ── Status line ── */
.sps-status {
    font-size   : 12px;
    color       : var(--sps-muted);
    margin-top  : 6px;
    min-height  : 18px;
    padding-left: 2px;
    display     : none;
}

/* ── Results dropdown ── */
.sps-results {
    position      : absolute;
    top           : calc(100% + 6px);
    left          : 0;
    right         : 0;
    background    : var(--sps-bg);
    border        : 1.5px solid var(--sps-border);
    border-radius : var(--sps-radius);
    box-shadow    : var(--sps-shadow);
    max-height    : 420px;
    overflow-y    : auto;
    z-index       : 9999;
    display       : none;
    overscroll-behavior: contain;
}

/* scrollbar */
.sps-results::-webkit-scrollbar { width: 6px; }
.sps-results::-webkit-scrollbar-track { background: transparent; }
.sps-results::-webkit-scrollbar-thumb {
    background    : var(--sps-border);
    border-radius : 3px;
}

/* ── Result list ── */
.sps-result-list {
    list-style : none;
    margin     : 0;
    padding    : 6px;
}

/* ── Individual result ── */
.sps-result {
    display        : flex;
    align-items    : flex-start;
    gap            : 10px;
    padding        : 10px 10px;
    border-radius  : calc(var(--sps-radius) - 3px);
    cursor         : pointer;
    transition     : background var(--sps-transition);
    outline        : none;
    text-decoration: none;
    color          : inherit;
}

.sps-result:hover,
.sps-result--focused {
    background : var(--sps-surface);
}

/* type badge / paragraph icon */
.sps-result__type,
.sps-result__icon {
    flex-shrink    : 0;
    font-size      : 10px;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : .06em;
    color          : var(--sps-accent);
    background     : rgba(37,99,235,.08);
    border-radius  : 4px;
    padding        : 2px 6px;
    margin-top     : 2px;
    white-space    : nowrap;
    line-height    : 1.6;
}

.sps-result__body {
    flex         : 1;
    min-width    : 0;
    display      : flex;
    flex-direction: column;
    gap          : 2px;
}

.sps-result__title {
    font-weight     : 600;
    font-size       : 14px;
    color           : var(--sps-text);
    line-height     : 1.35;
    white-space     : nowrap;
    overflow        : hidden;
    text-overflow   : ellipsis;
    text-decoration : none;
}

.sps-result__title:hover { text-decoration: underline; }

.sps-result__excerpt {
    font-size   : 12.5px;
    color       : var(--sps-muted);
    line-height : 1.5;
    display     : -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow    : hidden;
}

.sps-result__arrow,
.sps-result__jump {
    flex-shrink : 0;
    color       : var(--sps-muted);
    font-size   : 14px;
    margin-top  : 2px;
    transition  : color var(--sps-transition);
}

.sps-result:hover .sps-result__arrow,
.sps-result:hover .sps-result__jump {
    color : var(--sps-accent);
}

/* divider between results */
.sps-result + .sps-result {
    border-top : 1px solid var(--sps-border);
    margin-top : 2px;
    padding-top: 10px;
}

/* ── Tab badge (shown when a result is inside a specific tab) ── */
.sps-result__tab-badge {
    display        : inline-flex;
    align-items    : center;
    gap            : 4px;
    flex-shrink    : 0;
    font-size      : 10px;
    font-weight    : 700;
    color          : #7c3aed;
    background     : rgba(124,58,237,.10);
    border-radius  : 5px;
    padding        : 3px 7px;
    margin-top     : 2px;
    white-space    : nowrap;
    max-width      : 120px;
    overflow       : hidden;
    text-overflow  : ellipsis;
    line-height    : 1.5;
}

/* "In 'Tab Name'" label inside result title */
.sps-result__in-tab {
    color       : #7c3aed;
    font-weight : 700;
}

/* Subtle left-border accent for results found inside a tab */
.sps-result--tabbed {
    border-left  : 3px solid rgba(124,58,237,.30) !important;
    padding-left : 10px !important;
}

/* File-type result — amber palette */
.sps-result__type--file {
    color      : #b45309;
    background : rgba(180,83,9,.10);
}
.sps-result--file .sps-result__arrow {
    color : #b45309;
}

/* ── Mark (highlight) ── */
.sps-mark {
    background    : var(--sps-mark-bg);
    color         : var(--sps-mark-text);
    border-radius : 2px;
    padding       : 0 1px;
    font-style    : normal;
}

/* Page-level highlight mark (injected into DOM) */
mark.sps-highlight {
    background    : var(--sps-mark-bg);
    color         : var(--sps-mark-text);
    border-radius : 2px;
    padding       : 1px 2px;
    font-style    : normal;
    animation     : sps-fade-in 0.3s ease;
}

mark.sps-mark--flash {
    outline        : 2px solid var(--sps-accent);
    outline-offset : 2px;
    animation      : sps-flash 1.2s ease forwards;
}

@keyframes sps-flash {
    0%   { outline-color: var(--sps-accent); background: #fde047; }
    70%  { outline-color: var(--sps-accent); background: var(--sps-mark-bg); }
    100% { outline-color: transparent;       background: var(--sps-mark-bg); }
}

@keyframes sps-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Inline results box ── */
.sps-inline-results {
    margin-top    : 16px;
    border        : 1.5px solid var(--sps-border);
    border-radius : var(--sps-radius);
    overflow      : hidden;
    display       : none;
}

.sps-inline-results .sps-result-list {
    padding : 8px;
}

/* ── No results message ── */
.sps-no-results {
    text-align  : center;
    color       : var(--sps-muted);
    padding     : 18px 12px;
    font-size   : 14px;
    margin      : 0;
}

/* ── Responsive ── */
@media ( max-width: 480px ) {
    .sps-wrapper { font-size: 14px; }
    .sps-input   { font-size: 14px; padding: 10px 0; }
    .sps-results { max-height: 320px; }
}

/* ── Dark-mode support ── */
@media ( prefers-color-scheme: dark ) {
    .sps-wrapper {
        --sps-bg       : #0f172a;
        --sps-surface  : #1e293b;
        --sps-border   : #334155;
        --sps-border-f : #3b82f6;
        --sps-text     : #f1f5f9;
        --sps-muted    : #94a3b8;
        --sps-mark-bg  : #854d0e;
        --sps-mark-text: #fef9c3;
    }
}