/* =============================================================================
   SEARCH PAGE
   Uses the shared tokens from variables.css (--panel, --border, --text...)
============================================================================= */

.search-page {
    position: relative;
    z-index: 1;            /* above the header picture */
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 60px 1.25rem 2rem;
    flex: 1;               /* fill the space under the header */
    min-height: 0;
    overflow-y: auto;      /* and scroll inside it */
}

.sr-muted {
    color: var(--text-muted);
    font-size: .8125rem;
}

/* ---------- Search box ---------- */

.sr-hero {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.sr-box {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 64px;
    padding: 0 18px 0 22px;
    border: 1px solid rgba(62, 166, 255, .35);
    border-radius: 14px;
    background: rgba(10, 18, 30, .85);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    transition: border-color .2s, box-shadow .2s;
    cursor: text;
}

.sr-box:focus-within {
    border-color: rgba(62, 166, 255, .8);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35), 0 0 0 4px rgba(33, 150, 243, .15);
}

.sr-box > .bi-search {
    font-size: 1.25rem;
    color: #3EA6FF;
}

.sr-box input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: 500 1.25rem 'IBM Plex Sans', sans-serif;
}

.sr-box input::placeholder {
    color: rgba(148, 163, 184, .65);
    font-weight: 400;
}

/* The browser's own clear button: we have ours */
.sr-box input::-webkit-search-cancel-button {
    display: none;
}

.sr-clear {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--text-muted);
    cursor: pointer;
}

.sr-clear:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .12);
}

.sr-key {
    padding: 2px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font: 500 .8125rem 'IBM Plex Sans', sans-serif;
}

/* ---------- Try chips + Surprise me ---------- */

.sr-suggest {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sr-suggest-label {
    font-size: .8125rem;
    color: var(--text-muted);
}

.sr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.sr-chip {
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(17, 22, 29, .8);
    color: rgba(214, 230, 250, .9);
    font: 500 .8125rem 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.sr-chip span {
    margin-left: 6px;
    color: rgba(148, 163, 184, .75);
    font-variant-numeric: tabular-nums;
}

.sr-chip:hover {
    border-color: rgba(62, 166, 255, .55);
    background: rgba(33, 150, 243, .12);
}

.sr-surprise {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 198, 0, .5);
    border-radius: 999px;
    background: rgba(255, 198, 0, .08);
    color: #FFC600;
    font: 600 .8125rem 'IBM Plex Sans', sans-serif;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.sr-surprise:hover:not(:disabled) {
    border-color: rgba(255, 198, 0, .85);
    background: rgba(255, 198, 0, .16);
    box-shadow: 0 0 12px rgba(255, 198, 0, .25);
}

.sr-surprise:disabled {
    opacity: .4;
    cursor: default;
}

/* ---------- Cards ---------- */

.sr-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sr-card {
    min-width: 0;
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(17, 22, 29, .8);
    backdrop-filter: blur(6px);
}

.sr-card-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text);
}

.sr-message {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

.sr-empty {
    margin: 18px 0 6px;
    color: var(--text-muted);
}

/* ---------- Matching rockets / providers / countries / sites ---------- */

.sr-entities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px 24px;
}

.sr-entity-title {
    margin: 0 0 8px;
    font-size: .8125rem;
    font-weight: 600;
    color: rgba(200, 220, 245, .85);
}

.sr-entity {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.sr-entity:hover {
    border-color: rgba(62, 166, 255, .35);
    background: rgba(33, 150, 243, .08);
}

.sr-entity > .bi {
    flex-shrink: 0;
    width: 22px;
    font-size: 1rem;
    text-align: center;
    color: #3EA6FF;
}

.sr-entity-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sr-entity-text strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: .9375rem;
}

.sr-entity-text small {
    font-size: .75rem;
    color: var(--text-muted);
}

/* ---------- When it flew ---------- */

.sr-strip-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.sr-strip {
    display: grid;
    grid-template-columns: repeat(var(--years), minmax(0, 1fr));
    align-items: end;
    gap: 2px;
    height: 64px;
}

.sr-bar {
    position: relative;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* the visible bar grows from the bottom; the button stays full height,
   so even a short bar is easy to click */
.sr-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--h);
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #3EA6FF, #1E5FB8);
    transition: background .15s, box-shadow .15s;
}

.sr-bar:disabled {
    cursor: default;
}

.sr-bar:disabled::before {
    height: 2px;
    background: rgba(255, 255, 255, .06);
}

.sr-bar:hover:not(:disabled)::before {
    background: linear-gradient(180deg, #8FD0FF, #3EA6FF);
    box-shadow: 0 0 10px rgba(62, 166, 255, .5);
}

.sr-bar.is-active::before {
    background: linear-gradient(180deg, #FFE27A, #FFC600);
    box-shadow: 0 0 12px rgba(255, 198, 0, .5);
}

.sr-strip-labels {
    display: grid;
    grid-template-columns: repeat(var(--years), minmax(0, 1fr));
    gap: 2px;
    margin-top: 6px;
    font-size: .6875rem;
    color: rgba(148, 163, 184, .7);
    white-space: nowrap;
}

/* ---------- Result toolbar ---------- */

.sr-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(120, 170, 230, .1);
}

.sr-count {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--text-muted);
}

.sr-count > strong {
    font-size: 1.25rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.sr-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    border: 1px solid rgba(62, 166, 255, .45);
    border-radius: 999px;
    background: rgba(33, 150, 243, .12);
    color: rgba(214, 230, 250, .9);
    font: 400 .8125rem 'IBM Plex Sans', sans-serif;
    cursor: pointer;
}

.sr-pick strong {
    font-weight: 600;
    color: #E8F2FF;
}

.sr-pick .bi {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    font-size: .875rem;
}

.sr-pick:hover .bi {
    background: rgba(255, 255, 255, .18);
}

.sr-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sr-seg {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(10, 16, 24, .6);
}

.sr-seg button {
    padding: 5px 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font: 500 .8125rem 'IBM Plex Sans', sans-serif;
    cursor: pointer;
}

.sr-seg button:hover {
    color: var(--text);
}

.sr-seg button.is-active {
    background: rgba(33, 150, 243, .18);
    box-shadow: inset 0 0 0 1px rgba(62, 166, 255, .45);
    color: #E8F2FF;
}

.sr-sort {
    height: 32px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%2394A3B8' d='M1.6 5.1a.5.5 0 0 1 .7 0L8 10.8l5.7-5.7a.5.5 0 0 1 .7.7l-6 6a.5.5 0 0 1-.7 0l-6-6a.5.5 0 0 1 0-.7z'/%3E%3C/svg%3E")
        right 10px center / 11px no-repeat,
        rgba(10, 16, 24, .6);
    color: var(--text);
    font: 500 .8125rem 'IBM Plex Sans', sans-serif;
    appearance: none;
    cursor: pointer;
}

.sr-sort option {
    background: #0d1218;
}

/* ---------- Results ---------- */

.sr-list {
    display: flex;
    flex-direction: column;
}

.sr-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 2fr) minmax(0, 1.3fr) 92px 92px;
    align-items: center;
    gap: 16px;
    padding: 11px 10px;
    border-bottom: 1px solid rgba(120, 170, 230, .07);
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: background .15s;
}

.sr-row:hover {
    background: rgba(33, 150, 243, .07);
}

.sr-date {
    font-size: .8125rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.sr-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sr-main strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
    color: var(--text);
}

.sr-main > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .8125rem;
    color: var(--text-muted);
}

.sr-where {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: .8125rem;
    color: rgba(200, 215, 235, .85);
}

.sr-where > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sr-row mark,
.sr-entity mark {
    padding: 0 1px;
    border-radius: 2px;
    background: rgba(255, 198, 0, .22);
    color: #FFE27A;
}

.sr-flag {
    flex-shrink: 0;
    width: 22px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 4px rgba(0, 0, 0, .35);
}

.sr-flag--empty {
    display: inline-block;
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
}

.sr-type {
    justify-self: start;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

.sr-type--orb { background: rgba(33, 150, 243, .14); color: #7CC4FF; }
.sr-type--sub { background: rgba(244, 180, 0, .14);  color: #FBBF24; }

.sr-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8125rem;
    color: rgba(200, 215, 235, .85);
}

.sr-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.sr-status--success i { background: #22C55E; box-shadow: 0 0 6px rgba(34, 197, 94, .6); }
.sr-status--failure i { background: #E5484D; box-shadow: 0 0 6px rgba(229, 72, 77, .6); }
.sr-status--partial i { background: #F4B400; box-shadow: 0 0 6px rgba(244, 180, 0, .6); }
.sr-status--pending i { background: #64748B; }

.sr-more {
    display: block;
    margin: 16px auto 4px;
    padding: 9px 18px;
    border: 1px solid rgba(62, 166, 255, .4);
    border-radius: 8px;
    background: rgba(33, 150, 243, .08);
    color: #3EA6FF;
    font: 600 .875rem 'IBM Plex Sans', sans-serif;
    cursor: pointer;
}

.sr-more span {
    margin-left: 8px;
    font-weight: 400;
    color: var(--text-muted);
}

.sr-more:hover {
    background: rgba(33, 150, 243, .16);
}

/* ---------- On this day ---------- */

.sr-home-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* ---------- Focus ---------- */

.sr-chip:focus-visible,
.sr-surprise:focus-visible,
.sr-entity:focus-visible,
.sr-bar:focus-visible,
.sr-pick:focus-visible,
.sr-seg button:focus-visible,
.sr-sort:focus-visible,
.sr-more:focus-visible,
.sr-row:focus-visible,
.sr-clear:focus-visible {
    outline: 2px solid #3EA6FF;
    outline-offset: 2px;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 1100px) {
    .sr-row {
        grid-template-columns: 90px minmax(0, 1fr) 86px;
    }
    .sr-where,
    .sr-type {
        display: none;
    }
}

@media (max-width: 640px) {
    .search-page { padding-top: 24px; }
    .sr-box { height: 54px; }
    .sr-box input { font-size: 1rem; }
    .sr-key { display: none; }
    .sr-row { grid-template-columns: minmax(0, 1fr) 80px; }
    .sr-date { display: none; }
    .sr-strip-labels span:nth-child(even) { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-box, .sr-bar::before, .sr-row { transition: none; }
}