/* Keyboard use (lib/keyboard-nav.js): the outline on whatever Tab or the
   arrow keys have picked, so it is clear before Enter is pressed. Green
   (owner, 2026-10-07): the site's "saved" green; a lighter green on the
   blue top bar and footer, where the darker one wouldn't show. */
:root {
    --kbd-ring: var(--color-saved, #2e9e5b);
    --kbd-ring-on-blue: #6ee7a0;
}
.kbd-stop:focus-visible,
.section-plus:focus-visible,
.recent-toggle:focus-visible,
.filter-link:focus-visible,
.filter-chip:focus-visible,
.land-search-go:focus-visible,
.listings-pagination button:focus-visible {
    outline: 1.5px solid var(--kbd-ring);
    outline-offset: 2px;
}

/* The search bar, your tags and your notes are outlined first and only
   typed in after Enter. */
.kbd-stop:focus {
    border-radius: 10px;
}

/* A filter pop-up's item: the whole row outlined, not yet ticked. */
.city-option:has(input:focus-visible) {
    outline: 1.5px solid var(--kbd-ring);
    outline-offset: 1px;
    border-radius: 8px;
}

/* The listing picked with up / down, before Enter opens it. */
.row-toggle:focus-visible,
.location-toggle:focus-visible {
    outline: 1.5px solid var(--kbd-ring);
    outline-offset: -3px;
}

/* A field reached with the keys: outlined, no cursor until Enter. */
[data-kbd-armed="1"]:focus {
    outline: 1.5px solid var(--kbd-ring);
    outline-offset: 2px;
    caret-color: transparent;
}

/* A choice (radio or tick box inside its label): the whole row outlined. */
label:has(> input[type="radio"]:focus-visible),
label:has(> input[type="checkbox"]:focus-visible) {
    outline: 1.5px solid var(--kbd-ring);
    outline-offset: 2px;
    border-radius: 8px;
}

/* "You're in accessibility mode" / "Exited accessibility mode"
   (lib/keyboard-nav.js): at the top, so it never covers the page's own
   toast at the bottom. */
.kbd-toast {
    position: fixed;
    left: 50%;
    top: 14px;
    z-index: 200;
    max-width: min(440px, calc(100vw - 32px));
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--ink, #1f2a33);
    color: #fff;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
    font: 600 0.86rem/1.3 Inter, system-ui, sans-serif;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
.kbd-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Entering the mode: the toast becomes a card with the key legend. */
.kbd-toast--legend {
    border-radius: 14px;
    padding: 12px 16px 14px;
    text-align: left;
    width: min(400px, calc(100vw - 32px));
}
.kbd-toast-title {
    margin: 0 0 8px;
    font-size: 0.95rem;
    text-align: center;
}
.kbd-toast-keys {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 0;
    font-weight: 500;
    font-size: 0.82rem;
}
.kbd-toast-keys dt {
    font-weight: 700;
    color: #ffd166;
}
.kbd-toast-keys dd {
    margin: 0;
}

/* In accessibility mode (body.kbd-mode, lib/keyboard-nav.js) every item
   the keys land on gets the same thick outline, whatever the page's own
   style; a thin white ring inside keeps it clear on any background. On
   the blue bars (top bar, footer) the outline is a lighter green. */
body.kbd-mode :focus-visible,
body.kbd-mode .kbd-stop:focus,
body.kbd-mode [data-kbd-armed="1"]:focus {
    outline: 1.5px solid var(--kbd-ring) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #fff;
}
body.kbd-mode .site-bar :focus-visible,
body.kbd-mode .topbar :focus-visible,
body.kbd-mode .site-foot :focus-visible {
    outline-color: var(--kbd-ring-on-blue) !important;
}
/* A tick box or choice: the outline goes round its whole row instead. */
body.kbd-mode input[type="radio"]:focus-visible,
body.kbd-mode input[type="checkbox"]:focus-visible {
    box-shadow: none;
}

/* Listing rows sit in cards that clip what's drawn outside them: their
   outline goes just inside the edge instead. */
body.kbd-mode .row-toggle:focus-visible,
body.kbd-mode .location-toggle:focus-visible,
body.kbd-mode .saved-item-toggle:focus-visible {
    outline-offset: -3px !important;
    box-shadow: inset 0 0 0 4px #fff;
}