/* ── Quick Overview Navigator ── */
/* Tappable drill-down diagram built on the real keypad legend artwork and
   real app screenshots (see overview/img/en/) — no CSS-drawn calculator
   mock here. */

/* ── Keypad legend (real designed artwork) ──
   The image already bakes in its own "i" badges, so zones here are
   invisible full-rect hit targets only — no visual badge overlay needed.
   Percentages are each section's bounding box from the source SVG's
   821pt-tall viewBox, so they track the artwork regardless of rendered
   size. */
.legend-wrap { position: relative; max-width: 340px; margin: 0 auto; }
.legend-wrap img { width: 100%; height: auto; display: block; border-radius: 16px; }
.legend-zone {
    position: absolute; left: 0; width: 100%;
    display: block; text-decoration: none;
    border-radius: 8px;
}
.legend-zone:hover, .legend-zone:focus-visible {
    outline: 6px solid var(--clr-accent);
}

/* ── Panels ── */
.nav-panel { display: none; }
.nav-panel.active { display: block; }

/* Keeps a scrolled-to panel clear of the sticky header. */
#navigator-diagram { scroll-margin-top: 72px; }

.panel-intro { color: var(--clr-muted); margin-bottom: 1.5rem; max-width: 560px; }

.back-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--clr-card); border: 1px solid var(--clr-border);
    border-radius: 10px; padding: .5rem 1rem; min-height: 44px;
    font-weight: 600; font-size: .9rem; cursor: pointer; color: var(--clr-text);
    margin-bottom: 1.25rem;
}
.back-btn:hover { background: var(--clr-border); }

@media (min-width: 720px) {
    .legend-wrap { max-width: 380px; }
}