/* ==========================================================================
   Space Python search
   The site's dark Bootstrap 5.3 theme and fonts; the search box reads like a
   Python prompt (>>>). Each content type has one colour, used only for its icon
   and the small tick next to a result, so the list scans by type.
   ========================================================================== */

.sp-search,
.sp-nav-search,
.sp-suggest {
    --sp-ink: var(--bs-body-color);
    --sp-muted: var(--bs-secondary-color);
    --sp-line: rgba(var(--bs-body-color-rgb), .14);
    --sp-line-strong: rgba(var(--bs-body-color-rgb), .26);
    --sp-surface: rgba(var(--bs-body-color-rgb), .045);
    --sp-surface-hover: rgba(var(--bs-body-color-rgb), .08);
    --sp-accent: var(--bs-primary);
    --sp-accent-rgb: var(--bs-primary-rgb);
    --sp-mark: rgba(255, 205, 96, .26);
    --sp-mark-ink: inherit;

    --sp-article: #7ab7ff;
    --sp-example: #6fd1a6;
    --sp-quiz: #efbf5f;
    --sp-challenge: #ff9b7b;

    --sp-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --sp-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-bs-theme="light"] .sp-search,
[data-bs-theme="light"] .sp-nav-search,
[data-bs-theme="light"] .sp-suggest {
    --sp-mark: rgba(255, 196, 0, .32);
    --sp-article: #1f6fd1;
    --sp-example: #12805a;
    --sp-quiz: #9a6a00;
    --sp-challenge: #c2461f;
}

.sp-result-article, .sp-section.sp-result-article, .sp-suggest-article { --sp-type: var(--sp-article); }
.sp-result-example, .sp-section.sp-result-example, .sp-suggest-example { --sp-type: var(--sp-example); }
.sp-result-quiz, .sp-section.sp-result-quiz, .sp-suggest-quiz { --sp-type: var(--sp-quiz); }
.sp-result-challenge, .sp-section.sp-result-challenge, .sp-suggest-challenge { --sp-type: var(--sp-challenge); }

.sp-search mark,
.sp-suggest mark {
    background: var(--sp-mark);
    color: var(--sp-mark-ink);
    padding: 0 .08em;
    border-radius: 3px;
}

/* ---------------------------------------------------------------- head */

.sp-crumbs {
    font-size: .85rem;
    margin-bottom: 1.25rem;
}

.sp-crumbs a {
    color: var(--sp-muted);
}

.sp-search-head {
    max-width: 52rem;
    margin-bottom: 1.5rem;
}

.sp-search-title {
    font-family: var(--sp-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 1.15rem + 2.2vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 .5rem;
    overflow-wrap: anywhere;
}

.sp-search-intro {
    color: var(--sp-muted);
    font-size: 1.05rem;
    margin: 0 0 1.25rem;
}

.sp-hint,
.sp-note {
    font-size: .85rem;
    color: var(--sp-muted);
    margin: .65rem 0 0;
}

.sp-note {
    color: var(--sp-ink);
}

.sp-note .fa {
    color: var(--sp-quiz);
    margin-right: .25rem;
}

/* ---------------------------------------------------------------- the prompt */

.sp-console {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-top: 1.25rem;
    padding: 5px;
    background: var(--bs-body-bg);
    border: 1px solid var(--sp-line-strong);
    border-radius: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sp-console:focus-within {
    border-color: rgba(var(--sp-accent-rgb), .85);
    box-shadow: 0 0 0 4px rgba(var(--sp-accent-rgb), .2);
}

.sp-console-prompt {
    display: flex;
    align-items: center;
    padding: 0 .15rem 0 .85rem;
    font-family: var(--sp-mono);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--sp-example);
    user-select: none;
}

.sp-console-field {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.sp-console input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: .7rem .5rem;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--sp-ink);
    font-family: var(--sp-mono);
    font-size: 1.1rem;
    caret-color: var(--sp-example);
}

.sp-console input[type="search"]::placeholder {
    color: var(--sp-muted);
    opacity: .75;
}

.sp-console input[type="search"]::-webkit-search-cancel-button,
.sp-nav-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.sp-console-clear {
    align-self: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: .25rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sp-muted);
}

.sp-console-clear:hover,
.sp-console-clear:focus-visible {
    background: var(--sp-surface-hover);
    color: var(--sp-ink);
}

.sp-console-submit {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1.15rem;
    border-radius: 10px;
    font-weight: 600;
}

@media (max-width: 575.98px) {

    .sp-console-submit-text { display: none; }
    .sp-console-submit { gap: 0; }
    .sp-console-prompt { padding-left: .6rem; font-size: .95rem; }
    .sp-console input[type="search"] { font-size: 1rem; }
}

/* ---------------------------------------------------------------- type-ahead */

.sp-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1060;
    margin: 0;
    padding: .35rem;
    list-style: none;
    max-height: min(70vh, 28rem);
    overflow: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--sp-line-strong);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    text-align: left;
}

.sp-suggest[hidden] {
    display: none;
}

.sp-suggest-item a {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    color: var(--sp-ink);
    text-decoration: none;
}

.sp-suggest-item .fa {
    flex: 0 0 1.1rem;
    color: var(--sp-type, var(--sp-muted));
    text-align: center;
}

.sp-suggest-title {
    flex: 1 1 auto;
    min-width: 0;
}

.sp-suggest-type {
    flex: 0 0 auto;
    font-size: .75rem;
    color: var(--sp-muted);
}

.sp-suggest-item[aria-selected="true"] a,
.sp-suggest-item a:hover {
    background: var(--sp-surface-hover);
}

.sp-suggest-none {
    padding: .6rem .7rem;
    color: var(--sp-muted);
    font-size: .9rem;
}

.sp-suggest-all {
    border-top: 1px solid var(--sp-line);
    margin-top: .3rem;
    padding-top: .3rem;
}

.sp-suggest-all a {
    font-size: .9rem;
    color: var(--sp-accent);
}

/* ---------------------------------------------------------------- type tabs */

.sp-tabs {
    display: flex;
    gap: .25rem;
    margin: 0 0 1.75rem;
    border-bottom: 1px solid var(--sp-line);
    overflow-x: auto;
    scrollbar-width: none;
}

.sp-tabs::-webkit-scrollbar {
    display: none;
}

.sp-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem .85rem;
    margin-bottom: -1px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    color: var(--sp-muted);
    text-decoration: none;
    font-weight: 500;
}

.sp-tab:hover {
    color: var(--sp-ink);
}

.sp-tab.is-current {
    color: var(--sp-ink);
    border-bottom-color: var(--sp-accent);
}

.sp-tab.is-empty {
    opacity: .55;
}

.sp-tab-count {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: var(--sp-surface-hover);
}

/* ---------------------------------------------------------------- summary and chips */

.sp-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: .5rem;
}

.sp-summary-count {
    margin: 0;
    font-size: .9rem;
    color: var(--sp-muted);
}

.sp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .2rem .65rem;
    border: 1px solid rgba(var(--sp-accent-rgb), .55);
    border-radius: 999px;
    font-size: .8rem;
    color: var(--sp-ink);
    text-decoration: none;
}

.sp-chip:hover {
    background: rgba(var(--sp-accent-rgb), .15);
}

.sp-chip .fa {
    color: var(--sp-muted);
}

/* ---------------------------------------------------------------- results */

.sp-results {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-result {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.15rem 0 1.2rem 1rem;
    border-bottom: 1px solid var(--sp-line);
}

.sp-result.has-thumb {
    grid-template-columns: minmax(0, 1fr) 120px;
}

.sp-result::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.3rem;
    width: 3px;
    height: 1rem;
    border-radius: 2px;
    background: var(--sp-type, var(--sp-line-strong));
}

.sp-result-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    margin: 0 0 .25rem;
    font-size: .8rem;
    color: var(--sp-muted);
}

.sp-result-type .fa {
    color: var(--sp-type);
    margin-right: -.35rem;
}

.sp-result-category::before {
    content: "/";
    margin-right: .6rem;
    opacity: .5;
}

.sp-result-lang {
    padding: 0 .4rem;
    border: 1px solid var(--sp-line-strong);
    border-radius: 4px;
    font-family: var(--sp-mono);
    font-size: .7rem;
}

.sp-result-done {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--sp-example);
    font-weight: 600;
}

.sp-result-title {
    margin: 0 0 .35rem;
    font-family: var(--sp-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.005em;
}

.sp-result-title a {
    color: var(--sp-ink);
    text-decoration: none;
}

.sp-result-title a:hover {
    text-decoration: underline;
    text-decoration-color: var(--sp-type);
    text-underline-offset: .2em;
    text-decoration-thickness: 2px;
}

.sp-result-snippet {
    max-width: 70ch;
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: rgba(var(--bs-body-color-rgb), .78);
    overflow-wrap: anywhere;
}

.sp-result-meta {
    position: relative;   /* above the row link, so tags stay clickable */
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
    margin-top: .65rem;
    font-size: .78rem;
}

.sp-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .55rem;
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    color: var(--sp-muted);
    white-space: nowrap;
}

.sp-level-1 { color: var(--sp-example); }
.sp-level-2 { color: var(--sp-quiz); }
.sp-level-3 { color: var(--sp-challenge); }

.sp-badge-members .fa { color: var(--sp-quiz); }

.sp-tag {
    font-family: var(--sp-mono);
    color: var(--sp-muted);
    text-decoration: none;
}

.sp-tag::before {
    content: "#";
    opacity: .55;
}

.sp-tag:hover {
    color: var(--sp-ink);
    text-decoration: underline;
}

.sp-result-date {
    color: var(--sp-muted);
    margin-left: auto;
}

.sp-result-thumb {
    position: relative;
    z-index: 1;
    align-self: start;
    margin-top: .2rem;
}

.sp-result-thumb img {
    display: block;
    width: 120px;
    height: 84px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--sp-surface);
}

@media (max-width: 575.98px) {

    .sp-result.has-thumb { grid-template-columns: minmax(0, 1fr) 72px; gap: .85rem; }
    .sp-result-thumb img { width: 72px; height: 56px; }
    .sp-result-date { margin-left: 0; }
}

/* ---------------------------------------------------------------- pages */

.sp-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1.75rem;
}

.sp-page-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 .7rem;
    border: 1px solid var(--sp-line);
    border-radius: 8px;
    color: var(--sp-ink);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

a.sp-page:hover {
    background: var(--sp-surface-hover);
}

.sp-page.is-current {
    background: var(--sp-accent);
    border-color: var(--sp-accent);
    color: #fff;
    font-weight: 600;
}

.sp-page-gap {
    align-self: center;
    color: var(--sp-muted);
    padding: 0 .15rem;
}

/* ---------------------------------------------------------------- nothing found and the empty page */

.sp-empty {
    padding: .25rem 0 .5rem;
}

.sp-empty-title {
    font-family: var(--sp-display);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 .6rem;
    overflow-wrap: anywhere;
}

.sp-didyoumean {
    font-size: 1.05rem;
}

.sp-didyoumean a {
    font-family: var(--sp-mono);
    font-weight: 700;
    color: var(--sp-accent);
}

.sp-block {
    margin-top: 2.25rem;
}

.sp-empty + .sp-block,
.sp-block:first-child {
    margin-top: 1rem;
}

.sp-block-title {
    font-family: var(--sp-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 .85rem;
}

.sp-topic-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-tag-lg {
    display: inline-block;
    padding: .35rem .8rem;
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--sp-ink);
}

.sp-tag-lg:hover {
    border-color: var(--sp-line-strong);
    background: var(--sp-surface-hover);
    text-decoration: none;
}

.sp-section-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-section a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    color: var(--sp-ink);
    text-decoration: none;
}

.sp-section a:hover {
    border-color: var(--sp-type);
    background: var(--sp-surface);
}

.sp-section .fa {
    width: 1.25rem;
    text-align: center;
    color: var(--sp-type);
    font-size: 1.1rem;
}

.sp-section-name {
    flex: 1 1 auto;
    font-weight: 500;
}

.sp-section-count {
    white-space: nowrap;
    font-size: .8rem;
    color: var(--sp-muted);
    font-variant-numeric: tabular-nums;
}

.sp-tips {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--sp-muted);
    line-height: 1.75;
}

/* ---------------------------------------------------------------- advanced options */

.sp-adv {
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    background: var(--sp-surface);
}

@media (min-width: 992px) {

    .sp-adv {
        position: sticky;
        top: 1.5rem;
    }
}

.sp-adv-summary {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .95rem 1.1rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--sp-display);
    font-weight: 600;
}

.sp-adv-summary::-webkit-details-marker {
    display: none;
}

.sp-adv-summary .fa:first-child {
    color: var(--sp-muted);
}

.sp-adv-count {
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--sp-accent);
    color: #fff;
    font-size: .75rem;
    font-family: var(--bs-body-font-family);
}

.sp-adv-caret {
    margin-left: auto;
    color: var(--sp-muted);
    transition: transform .15s ease;
}

.sp-adv[open] .sp-adv-caret {
    transform: rotate(180deg);
}

.sp-adv-body {
    padding: 0 1.1rem 1.1rem;
}

.sp-adv-lock {
    margin-bottom: 1.1rem;
    padding: .9rem 1rem;
    border-radius: 10px;
    background: rgba(var(--sp-accent-rgb), .12);
    border: 1px solid rgba(var(--sp-accent-rgb), .35);
}

.sp-adv-lock-title {
    margin: 0 0 .3rem;
    font-weight: 600;
}

.sp-adv-lock-text {
    margin: 0 0 .8rem;
    font-size: .85rem;
    color: rgba(var(--bs-body-color-rgb), .8);
}

.sp-adv-lock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.sp-adv-fields {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sp-adv-fields[disabled] {
    opacity: .45;
}

.sp-adv-fields[disabled] .form-select,
.sp-adv-fields[disabled] .form-control {
    cursor: not-allowed;
}

.sp-field {
    margin-bottom: .85rem;
}

.sp-field .form-label {
    margin-bottom: .3rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--sp-muted);
}

.sp-field-help {
    margin: .3rem 0 0;
    font-size: .75rem;
    color: var(--sp-muted);
}

.sp-adv-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.1rem;
}

.sp-adv-reset {
    font-size: .85rem;
    color: var(--sp-muted);
}

/* ---------------------------------------------------------------- search in the site menu */

.sp-nav-search {
    display: flex;
    align-items: center;
}

.sp-nav-search form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.sp-nav-search .fa-search {
    position: absolute;
    left: .7rem;
    color: var(--sp-muted);
    pointer-events: none;
}

.sp-nav-search input[type="search"] {
    width: 11rem;
    padding: .38rem .75rem .38rem 2rem;
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    background: var(--sp-surface);
    color: var(--sp-ink);
    font-size: .875rem;
    transition: width .2s ease, border-color .15s ease;
}

.sp-nav-search input[type="search"]:focus {
    width: 16rem;
    outline: 0;
    border-color: rgba(var(--sp-accent-rgb), .85);
    box-shadow: 0 0 0 3px rgba(var(--sp-accent-rgb), .2);
}

.sp-nav-search .sp-suggest {
    left: auto;
    width: min(26rem, 90vw);
}

@media (max-width: 991.98px) {

    .sp-nav-search { padding: .5rem 0; }
    .sp-nav-search input[type="search"],
    .sp-nav-search input[type="search"]:focus { width: 100%; }
    .sp-nav-search .sp-suggest { left: 0; width: auto; }
}

/* ---------------------------------------------------------------- focus and motion */

.sp-search a:focus-visible,
.sp-search button:focus-visible,
.sp-search summary:focus-visible,
.sp-suggest a:focus-visible {
    outline: 2px solid var(--sp-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {

    .sp-console,
    .sp-adv-caret,
    .sp-nav-search input[type="search"] {
        transition: none;
    }
}