/* ==========================================================================
   Bird Conservation Nepal — Chhimeki Chara
   --------------------------------------------------------------------------
   The neighbourhood bird count campaign: an introduction, and the results of
   the count. Loads alongside bcn-page.css, which supplies the page head, the
   shell and the prose measure.

   Two panels, and they stay two panels rather than becoming one scrolling
   page. The results are shown by an application hosted elsewhere
   (chhimekichara.netlify.app) which opens with its own banner and its own
   paragraph about what the count is. Stacked below our introduction the
   reader would meet the title twice and the explanation twice, so the panels
   are kept apart and only one is on screen at a time.

   The tab strip is driven by twelve lines of plain JavaScript at the foot of
   the view rather than by Bootstrap. Bootstrap is not loaded on a redesigned
   page, and pulling it back in for one control is what made this page look
   unlike the rest of the site in the first place.
   ========================================================================== */

.panels { padding: var(--stack) 0; }

/* --- The strip ------------------------------------------------------------
   Set like the masthead navigation — a quiet row of words, the current one
   marked by a rule beneath it in the accent green — so a reader who has just
   come down from the header meets a control they already know. */

.panels__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(1.25rem, 3vw, 2.25rem);
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    padding: 0;
    border-bottom: 1px solid var(--rule);
}

.panels__tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.65rem 0;
    font-family: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: color 0.15s ease-out, border-color 0.15s ease-out;
}

.panels__tab:hover { color: var(--accent); }

.panels__tab[aria-selected="true"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.panels__tab:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

/* --- The results panel ---------------------------------------------------- */

.results__note {
    max-width: var(--measure);
    color: var(--ink-2);
    font-size: 0.9375rem;
    margin: 0 0 1.25rem;
}

/* The application is somebody else's page on somebody else's host. It is
   given a plain frame and a defined height so it does not sit flush against
   the page and read as part of it. */
.results__frame {
    border: 1px solid var(--rule);
    background: var(--paper-hi);
    overflow: hidden;
}

.results__frame iframe {
    display: block;
    width: 100%;
    height: clamp(560px, 78vh, 900px);
    border: 0;
}

/* An embedded frame is awkward on a phone and can fail outright behind a
   restrictive network, so the way out to the application itself is always on
   the page rather than only in the frame. */
.results__out {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--ink-3);
}

.results__out a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.results__out a:hover { color: var(--accent); }

@media (max-width: 600px) {
    .results__frame iframe { height: 70vh; }
}