/* =============================================================================
   BuildX Ask -- AI search over the video library and the Learning Center.

   Buz asked for "something you type a question in and it serves up a video."
   This is that box. It sits above the filter bar because it is the primary way
   in; the filters remain for people who prefer to browse.

   House rules: no em-dashes, icons not emojis, brand gold #F5A623 on black.
   ========================================================================== */

.vask-section {
    padding: 2.25rem 0 0.75rem;
    background: #FFFFFF;
}

/* -----------------------------------------------------------------------------
   HERO MODE (Aaron, 2026-08-12): the ask card IS the page opener now. The old
   "Video Library" heading and paragraph were removed and this card moved up to
   take their place, centered vertically and horizontally in the space between
   the breadcrumb bar and the fold.

   HOW THE VERTICAL CENTERING WORKS: the section claims the viewport height minus
   the fixed chrome above it, then centers its child with flex. --vask-chrome is a
   variable rather than a magic number so that when the ticker or nav height
   changes, one value moves and the centering stays true.

   190px is MEASURED, not estimated: top bar 38 + ticker + nav 70 + breadcrumb,
   read off the live layout with getBoundingClientRect. I first guessed 158 and
   the hero overflowed the fold by exactly 32px, which is the size of the guess
   being wrong. Measure the chrome, do not reason about it.

   min-height, NOT height: if a visitor asks a question, the results grow the
   card past the viewport, and a fixed height would clip them.
   -------------------------------------------------------------------------- */

.vask-section--hero {
    --vask-chrome: 190px;

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--vask-chrome));
    padding: 2rem 0;
}

/* Small viewports get dvh so mobile browser toolbars do not push the card
   off-screen. Progressive: browsers without dvh keep the vh value above. */
@supports (height: 100dvh) {
    .vask-section--hero {
        min-height: calc(100dvh - var(--vask-chrome));
    }
}

.vask-section--hero > .container {
    width: 100%;
}

/* Once results are showing, the card is tall and the generous hero whitespace
   becomes scrolling. JS adds this class on the first answer. */
.vask-section--hero.vask-section--answered {
    min-height: 0;
    padding: 2.25rem 0 1rem;
}

.vask {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: 2rem 2rem 1.75rem;
    border: 1px solid #E4E4E4;
    border-radius: 14px;
    background:
        radial-gradient(1100px 220px at 50% -60px, rgba(245, 166, 35, 0.10), transparent 70%),
        #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
}

/* Gold hairline along the top edge, the same accent the featured article card
   uses. Ties the new feature to the existing visual language. */
.vask::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 14px;
    right: 14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #F5A623, transparent);
}

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

.vask__head {
    text-align: center;
    margin-bottom: 1.35rem;
}

.vask__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    margin-bottom: 0.7rem;
    border: 1px solid rgba(245, 166, 35, 0.45);
    border-radius: 999px;
    background: rgba(245, 166, 35, 0.10);
    color: #8A5A0B;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.vask__title {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
    line-height: 1.2;
    color: #111111;
}

.vask__sub {
    max-width: 30rem;
    margin: 0 auto;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #666666;
}

/* ------------------------------------------------------------------ form -- */

.vask__form {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
}

.vask__inputwrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.vask__icon {
    position: absolute;
    top: 50%;
    left: 0.95rem;
    transform: translateY(-50%);
    color: #9A9A9A;
    pointer-events: none;
}

.vask__input {
    width: 100%;
    padding: 0.95rem 2.4rem 0.95rem 2.75rem;
    border: 1px solid #D5D5D5;
    border-radius: 10px;
    background: #FFFFFF;
    color: #1A1A1A;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.3;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.vask__input::placeholder { color: #A6A6A6; }

.vask__input:focus {
    outline: none;
    border-color: #F5A623;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
}

.vask__clear {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ECECEC;
    color: #666666;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.vask__clear:hover { background: #DEDEDE; color: #222222; }

.vask__go {
    position: relative;
    flex: 0 0 auto;
    min-width: 6.5rem;
    padding: 0 1.6rem;
    border: 0;
    border-radius: 10px;
    background: #000000;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.08s ease;
}

.vask__go:hover { background: #F5A623; color: #000000; }
.vask__go:active { transform: translateY(1px); }
.vask__go:disabled { opacity: 0.65; cursor: default; transform: none; }

.vask__spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border: 2px solid rgba(255, 255, 255, 0.32);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: vask-spin 0.6s linear infinite;
}

.vask--busy .vask__go-text { visibility: hidden; }
.vask--busy .vask__spinner { display: block; }

@keyframes vask-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- examples -- */

.vask__examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
}

.vask__examples-label {
    margin-right: 0.15rem;
    color: #999999;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vask__eg {
    padding: 0.32rem 0.7rem;
    border: 1px solid #E0E0E0;
    border-radius: 999px;
    background: #FAFAFA;
    color: #555555;
    font-family: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.14s ease;
}

.vask__eg:hover {
    border-color: #F5A623;
    background: #FFFFFF;
    color: #111111;
}

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

.vask__results { margin-top: 1.5rem; }

.vask__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid #EDEDED;
    color: #777777;
    font-size: 0.8125rem;
}

.vask__meta strong { color: #111111; }

.vask__list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vask__item {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 0.7rem;
    border: 1px solid #ECECEC;
    border-radius: 10px;
    background: #FFFFFF;
    transition: border-color 0.14s ease, box-shadow 0.14s ease,
                transform 0.14s ease;
}

.vask__item:hover {
    border-color: #D6D6D6;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    transform: translateY(-1px);
}

/* Rank 1 gets the gold treatment: on a question with one clear answer, the eye
   should land on it without reading. */
.vask__item--top {
    border-color: rgba(245, 166, 35, 0.55);
    background: linear-gradient(180deg, rgba(245, 166, 35, 0.045), #FFFFFF 60%);
}

.vask__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 132px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 7px;
    background: #000000;
}

.vask__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Articles have 8:5 art, videos have 16:9 YouTube stills. Both are cropped to
   16:9 here so the list has one rhythm instead of two. */
.vask__thumb--article { background: #F3F3F3; }

.vask__dur {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.82);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.vask__body { flex: 1 1 auto; min-width: 0; }

.vask__kind {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-bottom: 0.22rem;
    color: #8A8A8A;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.vask__kind--article { color: #8A5A0B; }

.vask__name {
    display: block;
    margin: 0 0 0.2rem;
    color: #111111;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.vask__name:hover { color: #B37A10; }

.vask__blurb {
    margin: 0;
    color: #6B6B6B;
    font-size: 0.8125rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   WEAK-MATCH CAVEAT (2026-08-12)
   Shown when the top score is below CONFIDENCE_STRONG. Aaron searched for
   easements, which BuildX barely covers, and got adjacent setback content labeled
   "Best matches" -- correct results, dishonestly framed. This says so plainly and
   routes the visitor to a human, which is the better outcome anyway.
   -------------------------------------------------------------------------- */

.vask__caveat {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #E2E2E2;
    border-left: 3px solid #F5A623;
    border-radius: 8px;
    background: #FAFAFA;
    color: #555555;
    font-size: 0.8438rem;
    line-height: 1.55;
}

.vask__caveat svg { flex: 0 0 auto; margin-top: 0.1rem; color: #B37A10; }
.vask__caveat strong { color: #111111; }

.vask__caveat a {
    color: #8A5A0B;
    font-weight: 600;
    text-decoration: underline;
}

.vask__caveat a:hover { color: #111111; }

/* The spoken words that actually matched. Quoted styling so it reads as speech
   rather than as the site's own description of the video. */
.vask__quote {
    position: relative;
    margin: 0 0 0.1rem;
    padding-left: 0.6rem;
    border-left: 2px solid rgba(245, 166, 35, 0.55);
    color: #5A5A5A;
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Jump to about 21:09" -- the visible proof that the search read the transcript
   rather than the title. Gold pill so the eye catches it on a scan. */
.vask__jump {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.4rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(245, 166, 35, 0.5);
    border-radius: 999px;
    background: rgba(245, 166, 35, 0.12);
    color: #8A5A0B;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    cursor: help;
}

.vask__jump svg { flex: 0 0 auto; }

/* The copy button is Buz's after-the-call workflow, made one click. */
.vask__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    align-self: center;
}

.vask__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.36rem 0.62rem;
    border: 1px solid #E2E2E2;
    border-radius: 7px;
    background: #FFFFFF;
    color: #666666;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.14s ease;
}

.vask__copy:hover { border-color: #F5A623; color: #111111; }
.vask__copy--done { border-color: #1E9E5A; color: #1E9E5A; }

/* ---------------------------------------------------------- empty / error -- */

.vask__empty {
    padding: 1.6rem 1rem;
    border: 1px dashed #DEDEDE;
    border-radius: 10px;
    background: #FAFAFA;
    color: #666666;
    font-size: 0.9375rem;
    line-height: 1.6;
    text-align: center;
}

.vask__empty strong { color: #111111; }

.vask__empty-hint {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: #909090;
}

/* ---------------------------------------------------------------- mobile -- */

@media (max-width: 720px) {
    /* Chrome is shorter on mobile (no desktop nav row) and vertical space is
       scarce, so the hero stops reserving a full screen and just sits near the
       top with comfortable breathing room. */
    .vask-section--hero {
        --vask-chrome: 118px;
        min-height: 0;
        padding: 1.5rem 0 1rem;
    }

    .vask { padding: 1.5rem 1.1rem 1.35rem; border-radius: 12px; }
    .vask__title { font-size: 1.3rem; }
    .vask__sub { font-size: 0.875rem; }

    /* Stack the button under the field. A 6.5rem button beside a text input on a
       360px screen leaves the input unusably narrow. */
    .vask__form { flex-direction: column; }
    .vask__go { min-height: 2.9rem; }

    /* The example chips are the fastest way in on a phone, where nobody wants to
       type. Scroll them horizontally instead of wrapping to three rows. */
    .vask__examples {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.3rem;
        scrollbar-width: none;
    }
    .vask__examples::-webkit-scrollbar { display: none; }
    .vask__eg { flex: 0 0 auto; }

    .vask__thumb { width: 96px; }
    .vask__name { font-size: 0.875rem; }
    .vask__blurb { -webkit-line-clamp: 2; font-size: 0.78125rem; }

    /* Copy sits under the text on narrow screens rather than squeezing the title. */
    .vask__item { flex-wrap: wrap; }
    .vask__actions { width: 100%; padding-left: calc(96px + 0.9rem); }
}

@media (prefers-reduced-motion: reduce) {
    .vask__item,
    .vask__go,
    .vask__eg { transition: none; }
    .vask__spinner { animation-duration: 1.6s; }
}