/*
 * Search dialog (inc/search.php, coc-search.js). It follows the reader's light: a sheet of paper with ink and amber by
 * day, the dark, cinematic voice of the home at night (body.dark-mode). A panel over a blurred page on desktop, the
 * whole screen on a phone. Every colour is a token: light below, dark under body.dark-mode.
 */
html:has(.coc-search[open]) { overflow: hidden; }

.coc-search {
    --s-fg: #141417;
    --s-ink: #141417;                       /* the query, titles, hovered text */
    --s-soft: #141417;                      /* chips and rows */
    --s-didyou: rgba(20, 20, 23, .86);
    --s-muted: rgba(20, 20, 23, .62);
    --s-line: rgba(20, 20, 23, .12);
    --s-amber: #d08a1e;                     /* decorative: icons */
    --s-amber-ui: #b5701a;                  /* the field's focus rule, the selected row: 3.6:1 on paper */
    --s-amber-text: #8f5410;                /* amber as text */
    --s-kick: #8f5410;
    --s-focus: #141417;
    --s-panel: #fff;
    --s-panel-line: rgba(20, 20, 23, .12);
    --s-glow: rgba(208, 138, 30, .05);
    --s-shadow: 0 40px 90px -30px rgba(48, 34, 14, .45), 0 2px 6px -2px rgba(20, 20, 23, .08);
    --s-placeholder: rgba(20, 20, 23, .6);
    --s-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7 7 17' stroke='%236d6d72' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    --s-key-line: rgba(20, 20, 23, .2);
    --s-key-bg: #f6f4ef;
    --s-chip-line: rgba(20, 20, 23, .46);   /* 3:1 on white */
    --s-chip-line-hi: #141417;
    --s-chip-fill: #f6f4ef;
    --s-act-line: rgba(143, 84, 16, .7);
    --s-row-hi: #f6f4ef;
    --s-thumb: #f6f4ef;
    --s-thumb-filter: saturate(.95);
    --s-mark: rgba(208, 138, 30, .2);
    --s-mark-line: #b5701a;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: clamp(1rem, 10vh, 7rem) 1rem 2rem;
    border: 0;
    background: transparent;
    color: var(--s-fg);
    font-family: var(--coc-sans);
    overflow: hidden;
}
body.dark-mode .coc-search {
    --s-fg: #ececec;
    --s-ink: #fff;
    --s-soft: #eee;
    --s-didyou: #ddd;
    --s-muted: rgba(255, 255, 255, .62);
    --s-line: rgba(255, 255, 255, .1);
    --s-amber: #f2b45a;
    --s-amber-ui: #f2b45a;
    --s-amber-text: #f2b45a;
    --s-kick: #ecc68f;
    --s-focus: #fff;
    --s-panel: #111114;
    --s-panel-line: rgba(255, 255, 255, .14);
    --s-glow: rgba(242, 180, 90, .07);
    --s-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9);
    --s-placeholder: rgba(255, 255, 255, .38);
    --s-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7 7 17' stroke='%23bbb' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    --s-key-line: rgba(255, 255, 255, .2);
    --s-key-bg: rgba(255, 255, 255, .04);
    --s-chip-line: rgba(255, 255, 255, .22);
    --s-chip-line-hi: rgba(255, 255, 255, .6);
    --s-chip-fill: rgba(255, 255, 255, .04);
    --s-act-line: rgba(242, 180, 90, .45);
    --s-row-hi: rgba(255, 255, 255, .06);
    --s-thumb: #1c1c21;
    --s-thumb-filter: saturate(.85);
    --s-mark: rgba(242, 180, 90, .2);
    --s-mark-line: rgba(242, 180, 90, .8);
}
@media (prefers-contrast: more) {
    .coc-search { --s-muted: rgba(20, 20, 23, .78); --s-line: rgba(20, 20, 23, .3); --s-chip-line: rgba(20, 20, 23, .78); --s-placeholder: rgba(20, 20, 23, .72); }
}
/* By day the page goes under a warm ink veil; at night under the dark one. */
.coc-search::backdrop { background: rgba(28, 24, 18, .36); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
body.dark-mode .coc-search::backdrop { background: rgba(6, 6, 9, .62); }
.coc-search[open] { display: flex; justify-content: center; align-items: flex-start; }

.coc-search__panel {
    display: flex;
    flex-direction: column;
    width: min(720px, 100%);
    max-height: 100%;
    border: 1px solid var(--s-panel-line);
    border-radius: 24px;
    background:
        radial-gradient(90% 60% at 100% 0%, var(--s-glow), transparent 60%),
        var(--s-panel);
    box-shadow: var(--s-shadow);
    overflow: hidden;
}

/* The field. */
.coc-search__bar form {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "label label label label" "icon input esc close";
    align-items: center;
    column-gap: .8rem;
    padding: 1.1rem 1.3rem 1rem;
    border-bottom: 1px solid var(--s-line);
}
.coc-search__label { grid-area: label; margin: 0 0 .45rem; font: 600 .68rem/1 var(--coc-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--s-muted); }
.coc-search__icon { grid-area: icon; width: 24px; height: 24px; color: var(--s-amber); }
.coc-search__input {
    grid-area: input;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--s-ink);
    font: 400 clamp(1.25rem, 2.6vw, 1.6rem)/1.2 var(--coc-serif);
    letter-spacing: -.01em;
    outline: none;
    appearance: none;
}
.coc-search__input::placeholder { color: var(--s-placeholder); }
/* The theme styles every input (white box on focus): this one is just text on the panel. */
.coc-search .coc-search__input, .coc-search .coc-search__input:focus { border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; }
.coc-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: var(--s-cancel) center / 18px no-repeat;
    cursor: pointer;
}
.coc-search__esc, .coc-search__foot kbd {
    padding: .2rem .45rem;
    border: 1px solid var(--s-key-line);
    border-radius: 6px;
    background: var(--s-key-bg);
    color: var(--s-muted);
    font: 500 .72rem/1 var(--coc-sans);
}
.coc-search__esc { grid-area: esc; }
.coc-search__close {
    grid-area: close;
    display: none;
    min-height: 44px;
    padding: 0 .4rem;
    border: 0;
    background: none;
    color: var(--s-ink);
    font: 500 .95rem/1 var(--coc-sans);
    cursor: pointer;
}
/* The focus indicator of the field: the amber rule under it. */
.coc-search__bar:focus-within form { border-bottom-color: var(--s-amber-ui); box-shadow: inset 0 -1px 0 var(--s-amber-ui); }

/* Body. */
.coc-search__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .6rem .7rem 1rem; }
.coc-search__sec { padding: .6rem .6rem .4rem; }
.coc-search__h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .6rem; font: 600 .68rem/1 var(--coc-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--s-muted); }
.coc-search__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.coc-search__chip, .coc-search__act {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 .95rem;
    border: 1px solid var(--s-chip-line);
    border-radius: 999px;
    background: transparent;
    color: var(--s-soft);
    font: 500 .88rem/1 var(--coc-sans);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}
.coc-search__chip:hover, .coc-search__act:hover { border-color: var(--s-chip-line-hi); background: var(--s-chip-fill); color: var(--s-ink); }
.coc-search__recent { display: inline-flex; align-items: center; }
.coc-search__recent .coc-search__chip { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.coc-search__rm {
    min-height: 38px;
    padding: 0 .65rem;
    border: 1px solid var(--s-chip-line);
    border-radius: 0 999px 999px 0;
    background: transparent;
    color: var(--s-muted);
    font: 400 1rem/1 var(--coc-sans);
    cursor: pointer;
}
.coc-search__rm:hover { color: var(--s-ink); border-color: var(--s-chip-line-hi); }
.coc-search__clear, .coc-search__link {
    padding: .2rem 0;
    border: 0;
    background: none;
    color: var(--s-amber-text);
    font: 600 .72rem/1 var(--coc-sans);
    letter-spacing: .08em;
    text-transform: none;
    cursor: pointer;
}
.coc-search__link { font-size: inherit; text-decoration: underline; text-underline-offset: .2em; }
/* A 44px target around the small "Clear" word, without moving the layout. */
.coc-search__clear { position: relative; }
.coc-search__clear::after { content: ""; position: absolute; inset: -14px -10px; }
.coc-search__acts { display: flex; flex-wrap: wrap; gap: .4rem; padding: .8rem .6rem .2rem; border-top: 1px solid var(--s-line); margin-top: .6rem; }
.coc-search__act { border-color: var(--s-act-line); }

/* Rows: idle picks (links) and results (options). */
.coc-search__list { margin: 0; padding: .2rem 0; list-style: none; }
.coc-search__rows { display: grid; gap: .1rem; }
.coc-search__opt {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    padding: .55rem .6rem;
    border-radius: 14px;
    color: var(--s-soft);
    text-decoration: none;
    cursor: pointer;
}
.coc-search__opt:hover, a.coc-search__opt:focus-visible, .coc-search__opt[aria-selected="true"] { background: var(--s-row-hi); color: var(--s-ink); }
.coc-search__opt[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--s-amber-ui); }
.coc-search__img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--s-thumb); filter: var(--s-thumb-filter); }
.coc-search__txt { display: grid; gap: .15rem; min-width: 0; }
.coc-search__kick { font: 600 .64rem/1.2 var(--coc-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--s-kick); }
.coc-search__kick:empty { display: none; }
.coc-search__ttl { font: 500 1.08rem/1.25 var(--coc-serif); color: var(--s-ink); }
.coc-search__snip { color: var(--s-muted); font-size: .84rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.coc-search__opt mark {
    padding: 0 .05em;
    border-radius: 3px;
    background: var(--s-mark);
    color: var(--s-ink);
    text-decoration: underline;
    text-decoration-color: var(--s-mark-line);
    text-underline-offset: .18em;
}
.coc-search__aud { display: inline-flex; align-items: center; gap: .3rem; align-self: start; margin-top: .15rem; color: var(--s-muted); font-size: .72rem; white-space: nowrap; }
.coc-search__aud svg { width: 14px; height: 14px; color: var(--s-amber); }

.coc-search__none { padding: 1rem .6rem .4rem; }
.coc-search__none-t { margin: 0 0 .4rem; font: 500 1.25rem/1.3 var(--coc-serif); color: var(--s-ink); }
.coc-search__didyou { margin: 0 0 .9rem; color: var(--s-didyou); }
.coc-search__none-s, .coc-search__msg { margin: 0 0 .6rem; color: var(--s-muted); font-size: .9rem; }
.coc-search__msg { padding: 1rem .6rem; }

.coc-search__foot { display: flex; gap: 1.2rem; padding: .7rem 1.3rem; border-top: 1px solid var(--s-line); color: var(--s-muted); font-size: .76rem; }
.coc-search__foot span { display: inline-flex; align-items: center; gap: .3rem; }

.coc-search :is(button, a, input):focus-visible { outline: 2px solid var(--s-focus); outline-offset: 2px; }
.coc-search__input:focus-visible { outline: none; }

/* Phones: the whole screen, a real «Close», finger-sized targets, no keyboard hints. */
@media (max-width: 767.98px) {
    .coc-search { padding: 0; }
    .coc-search__panel { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    .coc-search__bar form { grid-template-columns: auto 1fr auto; grid-template-areas: "label label label" "icon input close"; padding: calc(.9rem + env(safe-area-inset-top, 0px)) 1rem .8rem; }
    .coc-search__esc, .coc-search__foot { display: none; }
    .coc-search__close { display: inline-flex; align-items: center; }
    .coc-search__chip, .coc-search__act, .coc-search__rm { min-height: 44px; }
    .coc-search__body { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
    .coc-search__aud { display: none; }
}
@media (pointer: coarse) { .coc-search__chip, .coc-search__act, .coc-search__rm { min-height: 44px; } }

/* Opening: fade and settle (none with reduced motion). */
@media (prefers-reduced-motion: no-preference) {
    .coc-search[open] .coc-search__panel { transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1); }
    @starting-style { .coc-search[open] .coc-search__panel { opacity: 0; transform: translateY(8px) scale(.985); } }
    .coc-search[open]::backdrop { transition: opacity .2s ease; }
    @starting-style { .coc-search[open]::backdrop { opacity: 0; } }
}
@media (forced-colors: active) {
    .coc-search__opt[aria-selected="true"] { outline: 2px solid Highlight; }
    .coc-search__opt mark { forced-color-adjust: none; background: Mark; color: MarkText; }
}