/* ============================================================
   publiek/vastzoek.css - het vak "Stuck?" naast "About this
   walkthrough": zoeken in de hoofdstukken en filmpjes van het spel.
   En de modus Stuck Wiki: de knop met het bolletje (rood uit, groen
   aan) en het blok met de uitkomsten uit de geschreven gids, dat
   onder de rij staat (.stuckwiki).
   Hoort bij templates/public/delen/_vastzoek.html; de plek in de
   rij regelt over.css (.over-rij.met-zoek).
   ============================================================ */

.vastzoek {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid #6d4df2;
    border-radius: var(--rond);
    background: linear-gradient(180deg, #1a1658 0%, #10143c 100%);
}
.vastzoek h2 { margin: 0; font-size: 16px; }
.vastzoek p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--tekst-zacht);
}

/* het zoekvak met het vergrootglas erin; de uitkomsten hangen eronder */
.vastzoek-veld { position: relative; margin-top: 2px; }
.vastzoek-veld > svg {
    position: absolute;
    left: 12px;
    top: 12px;
    color: var(--tekst-zacht);
    pointer-events: none;
}
.vastzoek-veld input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 36px;
    border: 1px solid #6d4df2;
    border-radius: var(--rond-klein);
    background: var(--vlak-diep);
    color: var(--tekst);
    font: inherit;
    font-size: 14.5px;
    outline: 0;
}
.vastzoek-veld input::placeholder { color: var(--tekst-dof); }

/* De knop "Stuck Wiki" naast het zoekvak: een schakelaar met een
   bolletje. Rood is uit (het vak zoekt in de pagina), groen is aan
   (het vak zoekt in de geschreven gids). Het woord erachter zegt
   hetzelfde, voor wie de kleur niet ziet. */
.vastzoek-veld.met-gids { display: flex; gap: 8px; }
.vastzoek-veld.met-gids input { flex: 1; min-width: 0; }
.vastzoek-gids {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 11px;
    border: 1px solid #6d4df2;
    border-radius: var(--rond-klein);
    background: var(--vlak-diep);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.vastzoek-gids:hover { background: #171b55; }
.vastzoek-gids:focus-visible { outline: 2px solid var(--paars-licht); outline-offset: 2px; }
.vastzoek-gids.aan { border-color: #22c55e; }
.vastzoek-bol {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .22);
}
.vastzoek-gids.aan .vastzoek-bol,
.vastzoek-bol.aan {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .25), 0 0 10px rgba(34, 197, 94, .8);
}
.vastzoek-stand {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fca5a5;
}
.vastzoek-gids.aan .vastzoek-stand { color: #86efac; }
.vastzoek-veld input:focus { border-color: var(--paars-licht); box-shadow: 0 0 0 2px rgba(124, 58, 237, .3); }

/* De uitkomsten liggen over de pagina heen, zodat het vak zelf even
   hoog blijft als het blok ernaast. */
.vastzoek-uit {
    position: absolute;
    left: 0; right: 0;
    top: 46px;
    z-index: 30;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid #6d4df2;
    border-radius: var(--rond-klein);
    background: #0b0f30;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .65);
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #6d4df0 #10143c;
}
.vastzoek-uit li {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.vastzoek-uit li:hover,
.vastzoek-uit li[aria-selected="true"] { background: rgba(124, 58, 237, .32); }
.vastzoek-uit li.geen,
.vastzoek-uit li.meer { color: var(--tekst-zacht); cursor: default; background: none; font-size: 13.5px; }

/* de regel boven de naam: wat het is (Chapter, Secret ...) en de tijd */
.vastzoek-soort {
    display: block;
    margin-bottom: 2px;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #c9bfff;
}
.vastzoek-tijd {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: #1b1f63;
    color: #fff;
    font-size: 11.5px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.vastzoek-naam { display: block; font-weight: 600; }
.vastzoek-uitleg { display: block; font-size: 12px; color: var(--tekst-zacht); }
/* de regel bovenaan als er op iets anders is gezocht dan er staat
   (een tikfout verbeterd, een vraagwoord weggelaten) */
.vastzoek-uit li.vastzoek-gezocht { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid #2a2f7a; border-radius: 0; }

/* ------------------------------------------------------------
   De uitkomsten van de modus Stuck Wiki: onder de rij, over de
   hele breedte. Per deel van de gids een vakje: de kop van het
   deel en een stuk tekst met de woorden
   van de vraag gemerkt. Staat het op meer plekken in dat deel,
   dan staan de eerste drie er en komt de rest met een knop.
   Meer dan vier vakjes: er staan er vier en je schuift in het
   blok naar de rest.
   ------------------------------------------------------------ */
.stuckwiki {
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid #22c55e;
    border-radius: var(--rond);
    background: linear-gradient(180deg, #14164a 0%, #0c0f33 100%);
}
.stuckwiki[hidden] { display: none; }
.stuckwiki-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stuckwiki-kop h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 17px; }
.stuckwiki-telling { color: var(--tekst-zacht); font-size: 14px; }
.stuckwiki-telling b { color: #fff; }
/* de gids staat nog op "alleen het beheer" */
.stuckwiki-test {
    margin-left: auto;
    padding: 3px 10px;
    border: 1px solid rgba(245, 158, 11, .6);
    border-radius: 999px;
    background: rgba(245, 158, 11, .14);
    color: var(--goud);
    font-size: 12.5px;
    font-weight: 700;
}
/* De kaders met uitkomsten. Zijn het er meer dan vier, dan zet het
   script (vastzoek.js) de hoogte op vier kaders en schuif je erin. */
.stuckwiki-lijst { position: relative; }
.stuckwiki-lijst.schuift {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;    /* de breedte verandert niet als de balk verschijnt */
    padding-right: 10px;         /* lucht tussen de kaders en de schuifbalk */
    scrollbar-width: thin;
    scrollbar-color: #6d4df0 #10143c;
}
.stuckwiki-lijst.schuift:focus-visible { outline: 2px solid var(--paars-licht); outline-offset: 4px; }
.stuckwiki-rij {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: #0a0d2b;
}
.stuckwiki-rij:first-child { margin-top: 12px; }
.stuckwiki-deel { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.stuckwiki-deel b { font-size: 15px; overflow-wrap: anywhere; }
/* onder welk deel het valt: "Glitter Gulch Mine" bij "7:1 Jiggies" */
.stuckwiki-boven { color: #c9bfff; font-size: 13px; }
.stuckwiki-boven::before { content: "in "; color: var(--tekst-zacht); }
.stuckwiki-sterk {
    margin-left: auto;
    font-size: 11px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #86efac;
}
.stuckwiki-sterk.partial { color: var(--goud); }
.stuckwiki-tekst {
    margin: 0;
    max-width: 130ch;
    font-size: 14px;
    line-height: 1.6;
    color: #c8cdf0;
    overflow-wrap: anywhere;
}
.stuckwiki-tekst mark {
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(124, 58, 237, .45);
    color: #fff;
    font-weight: 700;
}
/* meer plekken in hetzelfde deel: een dun lijntje ertussen */
.stuckwiki-tekst + .stuckwiki-tekst,
.stuckwiki-rest .stuckwiki-tekst { margin-top: 8px; padding-top: 8px; border-top: 1px solid #1b2052; }
.stuckwiki-rest[hidden] { display: none; }
.stuckwiki-nog { margin: 8px 0 0; font-size: 13px; color: var(--tekst-zacht); }
/* de knop "Show 8 more in this part" */
.stuckwiki-meer {
    margin-top: 10px;
    padding: 5px 12px;
    border: 1px solid #6d4df2;
    border-radius: 999px;
    background: none;
    color: #c9bfff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.stuckwiki-meer:hover { background: rgba(124, 58, 237, .25); color: #fff; }
.stuckwiki-meer:focus-visible { outline: 2px solid var(--paars-licht); outline-offset: 2px; }
.stuckwiki-bron { margin: 12px 0 0; font-size: 12.5px; color: var(--tekst-zacht); overflow-wrap: anywhere; }

/* Zonder script kan het vak niets: dan staat het er niet. */
@media (scripting: none) {
    .vastzoek { display: none; }
}
/* het script vond niets om in te zoeken */
.vastzoek[hidden] { display: none; }

@media (max-width: 640px) {
    .vastzoek { padding: 12px 14px; }
    .stuckwiki { padding: 12px 14px; }
    /* de kop van het deel boven elkaar: de sterkte niet meer rechts */
    .stuckwiki-sterk, .stuckwiki-test { margin-left: 0; }
}

/* Stuck Wiki: de regel "terug" bovenaan een open wereld in het dropmenu */
.vastzoek-uit li.vastzoek-terug { color: #c9bfff; font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
.vastzoek-uit li.vastzoek-terug .vastzoek-naam { font-weight: 500; }