/* ═══════════════════════════════════════════════════════════════════════
   BASE.CSS  —  global element defaults built on the token layers
   ───────────────────────────────────────────────────────────────────────
   Intentionally light-touch so adopting the design system changes NO
   existing visuals. The global focus ring uses :where() (zero specificity),
   so any component that already defines its own focus style still wins.
   ═══════════════════════════════════════════════════════════════════════ */

/* Keyboard focus ring — zero-specificity, so it only fills the gap for
   elements that don't already style their focus. Mouse clicks never trigger
   it (:focus-visible). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
    border-radius: var(--ds-radius-xs);
}

/* Host for the single shared SVG glass-refraction filter (see <Glass>).
   Mounted once at the app root; carries no visual box of its own. */
.ds-glass-filter-host {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Opt-in helper for non-kit surfaces that want the standard focus ring. */
.ds-focus-ring:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Touch-target sizing (audit S3) — on coarse-pointer (touch) devices,
   guarantee shared interactive controls meet the ~44px minimum. Scoped to
   `pointer: coarse` so mouse/desktop layouts are unchanged.
   ═══════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
    /* Icon / circular buttons → full 44×44 */
    .pn-btn,
    .navbar-toggler,
    .btn-close,
    .header-theme-toggle,
    .header-theme-toggle--button,
    .fl-guide-btn,
    .tks-mkt-btn,
    .tks-gen-btn,
    .floating-close-button,
    .spending-btn-primary {
        min-width: 44px;
        min-height: 44px;
    }
    /* Text inputs → 44px tall */
    .us-input,
    .tks-input,
    .spending-input {
        min-height: 44px;
    }
    /* Text links / pills → 44px tap height without forcing a min-width */
    .beez-link-button,
    .public-footer-lang,
    .beez-lang-switch,
    .legal-back-link,
    .auth-form-pivot-link,
    .auth-topbar-brand,
    .public-header-logo,
    .navbar-brand.beez-brand {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    /* Off-canvas mobile menu links — the highest-count offender (≈24px tall). */
    .mobile-sidebar .nav-link,
    .mobile-sidebar .list-unstyled > li > a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Floating-widget clearance (audit F2) — the fixed BeeZ Buddy chat widget
   sits bottom-right and on small screens covered page-bottom content (e.g.
   the advanced-tools disclaimer). Reserve scroll space below in-app content
   on narrow viewports so the last block can clear the widget.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    main.content {
        padding-bottom: 92px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive data tables (audit F4) — on small screens wide data tables
   (ledgers, holdings, money items, leaderboards) clipped at the viewport
   edge. Make in-app tables their own horizontal scroll container so they
   pan instead of overflowing the page. Opt out with `.no-scroll-x`.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .container.scale table:not(.no-scroll-x) {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}