/* KoinVoice public listening page, ported from "KoinVoice Public Web" in the design pack. */
body { margin: 0; background: #f4f1e9; font-family: 'Inter', system-ui, sans-serif; color: #12352a; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { box-sizing: border-box; }
a { color: #1f6b46; }
a:hover { color: #12352a; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #d5ae5b; outline-offset: 2px; }
button:disabled { cursor: not-allowed !important; opacity: .6; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 760px) { [data-footer-grid] { grid-template-columns: 1fr !important; gap: 28px !important; } }
@keyframes kv-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.kv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }
.kv-dot.pulse { animation: kv-pulse 1.6s ease-in-out infinite; }
.soon { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #7a5214; background: #f4e6c6; border-radius: 999px; padding: 2px 8px; vertical-align: middle; }

/**
 * THE BLUE A PHONE ADDS BY ITSELF.
 *
 * The tap flash: on iOS and on Android, touching anything interactive paints a
 * translucent blue rectangle over it for a moment. It belongs to the platform,
 * not to this page, and it is the one blue a reader on a phone actually sees.
 * Replaced with this page's gold at the same weight, so a tap still
 * acknowledges itself.
 *
 * colour-scheme: stated rather than guessed. Unset, a browser in dark mode may
 * draw the furniture it still owns - scrollbars, the caret, a date field - for
 * a dark page, over a cream one.
 */
/**
 * THE HEADER IS A STRIP AT EVERY WIDTH, WHICH IS WHY IT CAN BE PINNED.
 *
 * Six nav controls fit one row beside the logo on a desktop. At 320px they
 * wrapped to four rows and the header measured 206px, so pinning it parked a
 * quarter of the phone over the content for the whole length of the page, worst
 * on Get the app where what it covered was the reason for visiting.
 *
 * Unpinning it was the first fix and the wrong one: it traded a header that was
 * always in the way for a nav that was never there. The height was the problem,
 * so the height is what changed. Below 700px the controls fold behind one
 * button, the header is a strip again, and it stays pinned.
 *
 * The open menu is laid out as a column filling the card's width, because six
 * pills wrapped into rows is the arrangement this is replacing.
 *
 * These rules insist, because the markup is inline-styled from the design pack
 * and an inline style beats a stylesheet. The alternative is a second set of
 * sizes threaded through the JavaScript, which is how one control ends up
 * looking unlike the rest.
 */
[data-kv-header] { position: sticky; top: 0; z-index: 20; }
@media (max-width: 700px) {
  [data-kv-header] [data-kv-menu] { display: inline-flex !important; }
  /* Closed by default and opened by the attribute, so a fresh render is closed:
     navigating re-renders, which is exactly when the menu should shut. */
  [data-kv-header] nav { display: none !important; }
  [data-kv-header][data-open] nav {
    display: flex !important; flex-direction: column; align-items: stretch;
    width: 100%; gap: 7px !important; margin-top: 4px;
  }
  [data-kv-header][data-open] nav > button, [data-kv-header][data-open] nav > a {
    width: 100%; justify-content: center; min-height: 44px;
  }
  /* The language chip is a span wrapping its own button and popup, so stretching
     the row stretches the wrapper and leaves the pill its original width: one
     short control in a column of full-width ones, which reads as a mistake
     rather than as a different kind of control. The button inside is what has
     to stretch; the popup is positioned against the wrapper and is left alone. */
  [data-kv-header][data-open] nav > [data-langpick] > button {
    width: 100%; justify-content: center; min-height: 44px;
  }
}

html { color-scheme: light; -webkit-tap-highlight-color: rgba(213, 174, 91, .24); }

/**
 * A FALLBACK, NOT THE FIX.
 *
 * These rules were written to tint the open list of a native dropdown, and on
 * most platforms they cannot: an option's colours are the operating system's,
 * and Chrome on Windows and macOS ignores them outright. So the list stayed
 * blue while this file read as though it had been dealt with.
 *
 * The fix is koin-searchselect, which the page now loads: it draws the list in
 * the page's own colours instead of letting the system draw it. These stay for
 * the browser where the script did not run and the rules do land - Firefox on
 * Linux, and a few Android builds - where they are better than nothing.
 */
select option { background: #ffffff; color: #12352a; }
select option:checked, select option:hover { background: #e5f2e9; color: #1f6b46; }
::selection { background: #e5f2e9; color: #12352a; }