/* Phones, tablets, foldables and installed-app mode. Loaded last so it can refine the other sheets. */

/* Base: stable text size, no horizontal scroll, media never wider than its box. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; -webkit-tap-highlight-color: rgba(11, 75, 163, .15); }
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; }
main p, main li, main h1, main h2, main h3, main td { overflow-wrap: break-word; }
main table { max-width: 100%; }
main .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Notches and rounded corners (viewport-fit=cover). */
.k-head, .topbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.site-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.container, .container-fluid { padding-left: max(var(--bs-gutter-x, .75rem) * .5, env(safe-area-inset-left)); padding-right: max(var(--bs-gutter-x, .75rem) * .5, env(safe-area-inset-right)); }
.back-to-top { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }

/* Touch devices: comfortable targets and no iOS zoom-on-focus. */
@media (pointer: coarse) {
    .btn, .nav-link, .dropdown-item, .form-check-input, .k-mi, .site-footer a, .pagination .page-link { min-height: 44px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
    .form-check-input { width: 1.25rem; height: 1.25rem; }
    .site-footer ul li a { display: inline-block; padding-block: .35rem; }
    input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select { font-size: 16px; min-height: 44px; }
    textarea.form-control { min-height: 96px; }
}

/* Install banner. */
.k-install { position: fixed; z-index: 1060; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom));
    max-width: 520px; margin-inline: auto; display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: 18px;
    background: #0a1a33; color: #fff; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 18px 44px rgba(3, 13, 34, .5); animation: k-install-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.k-install[hidden] { display: none; }
.k-install img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.k-install-text { flex: 1; min-width: 0; line-height: 1.3; }
.k-install-text strong { display: block; font-size: .95rem; }
.k-install-text span { display: block; font-size: .8rem; color: #c9d7ee; }
.k-install-go { flex: none; border: 0; border-radius: 999px; padding: .55rem 1.1rem; min-height: 44px; font-weight: 700; background: #ffd400; color: #14181f; }
.k-install-go:hover { background: #ffe34d; }
.k-install-go[hidden] { display: none; }
.k-install-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #c9d7ee; }
.k-install-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
@keyframes k-install-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Keep the floating buttons clear of the banner. */
html.has-install .back-to-top { bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (max-width: 767.98px) { html.has-install .k-dock { bottom: calc(172px + env(safe-area-inset-bottom)); } .k-dock { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* Installed app: no browser chrome, so respect the top inset and hide install prompts. */
html.is-standalone #installApp, html.is-standalone .k-install { display: none !important; }
@media (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top); overscroll-behavior-y: contain; }
    #installApp, .k-install { display: none !important; }
}

/* Small phones and folded foldables. */
@media (max-width: 380px) {
    body { font-size: .95rem; }
    .container { --bs-gutter-x: 1.1rem; }
    h1, .page-hero h1 { font-size: clamp(1.6rem, 8.2vw, 2.1rem); line-height: 1.12; }
    h2, .section-title { font-size: clamp(1.35rem, 6.6vw, 1.7rem); }
    .btn-lg { padding: .7rem 1.1rem; font-size: 1rem; }
    .page-hero-stats { gap: .4rem; } .page-hero-stats .chip { font-size: .8rem; padding: .35rem .65rem; }
    .k-install { gap: .55rem; padding: .65rem .65rem; } .k-install img { width: 38px; height: 38px; }
}
@media (max-width: 300px) { .k-install-text span { display: none; } .k-brand-text { font-size: .95rem; } }

/* Phones in landscape: short screens, so shrink the hero and keep the menu scrollable. */
@media (max-height: 480px) and (orientation: landscape) {
    .page-hero, .k-hero { padding-block: 1.6rem; min-height: 0; }
    .k-head .navbar-collapse { max-height: calc(100dvh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .k-install { max-width: 440px; margin-inline: auto; padding: .5rem .7rem; }
    .k-install-text span { display: none; }
}
@media (max-width: 991.98px) { .k-head .navbar-collapse { max-height: calc(100dvh - 72px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } }

/* Tablets: two comfortable columns instead of stretched phone layout. */
@media (min-width: 576px) and (max-width: 991.98px) { .container { max-width: 100%; } }

/* Very large screens: keep line lengths readable. */
@media (min-width: 1600px) { .container { max-width: 1480px; } }

/* Forms never overflow their card on narrow screens. */
.reg-form, .reg-form-inner, .form-control, .form-select { max-width: 100%; }
@media (max-width: 575.98px) { .reg-form-inner { padding: 1.1rem; } .reg-type-card { padding: .8rem; } }

@media (prefers-reduced-motion: reduce) { .k-install { animation: none; } }
@media print { .k-install, .back-to-top, .k-dock, #installApp { display: none !important; } }