/**
 * Famylio Accessibility
 * Shared floating control for readable text, contrast and calmer motion.
 */

:root {
    --famylio-a11y-accent: #bb725d;
    --famylio-a11y-accent-deep: #8e5143;
    --famylio-a11y-ink: #1f2937;
    --famylio-a11y-muted: #5f6b7b;
    --famylio-a11y-surface: #fffdf9;
    --famylio-a11y-panel: rgba(255, 253, 249, 0.98);
    --famylio-a11y-border: rgba(40, 32, 26, 0.12);
    --famylio-a11y-shadow: 0 18px 50px rgba(38, 28, 22, 0.16);
}

html.a11y-text-small {
    --fam-readable-font: 15px;
    --fam-readable-small: 12.5px;
    --fam-action-size: 40px;
    font-size: 15px !important;
}

html.a11y-text-large {
    --fam-readable-font: 18.5px;
    --fam-readable-small: 15.5px;
    --fam-action-size: 50px;
    font-size: 18.5px !important;
}

html.a11y-high-contrast {
    --init-text: #111827;
    --init-muted: #334155;
    --init-border: rgba(17, 24, 39, 0.22);
    --fam-ink: #111827;
    --fam-line: rgba(17, 24, 39, 0.2);
    --fam-line-strong: rgba(17, 24, 39, 0.28);
    --fam-surface: #ffffff;
    --fam-surface-soft: #fbfdff;
    --bo-ink: #111827;
    --bo-text: #1f2937;
    --bo-muted: #334155;
    --bo-border: rgba(17, 24, 39, 0.22);
    --bo-border-soft: rgba(17, 24, 39, 0.18);
    --bo-surface: #ffffff;
    --bo-surface-soft: #fbfdff;
}

html.a11y-high-contrast body {
    color: #111827 !important;
}

html.a11y-high-contrast :where(.card, .bo-card, .dashboard-card, .module-card, .setting-card, .secretary-card, .modal-content, .topbar-btn, .topbar-lang-btn, .topbar-call-btn, .topbar-user, input, textarea, select) {
    border-color: rgba(17, 24, 39, 0.22) !important;
}

html.a11y-text-large :where(body, button, input, select, textarea) {
    line-height: 1.55;
}

html.a11y-text-large body.famylio-shell :where(.page-content, .card, .bo-card, .module-card, .setting-card, .secretary-card, .modal-content, .nav-item, .btn, .btn-terra, .btn-outline, .topbar-title p, input, select, textarea, button) {
    font-size: max(1em, 1rem);
}

html.a11y-text-small body.famylio-shell :where(.page-content, .card, .bo-card, .module-card, .setting-card, .secretary-card, .modal-content, .nav-item, .btn, .btn-terra, .btn-outline, .topbar-title p, input, select, textarea, button) {
    font-size: min(1em, 0.94rem);
}

html.a11y-underline-links a {
    text-decoration: underline !important;
    text-underline-offset: .18em;
    text-decoration-thickness: .08em;
}

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
}

.famylio-a11y-toggle {
    position: fixed;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 9050;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background:
        linear-gradient(135deg, var(--famylio-a11y-accent-deep), var(--famylio-a11y-accent));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 16px 34px rgba(116, 73, 57, 0.22);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

body.famylio-shell .famylio-a11y-toggle {
    bottom: calc(var(--radio-bar-h, 0px) + max(88px, env(safe-area-inset-bottom)));
}

.famylio-a11y-toggle i {
    font-size: 1.22rem;
}

.famylio-a11y-panel {
    position: fixed;
    left: max(18px, env(safe-area-inset-left));
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px);
    z-index: 9051;
    width: min(380px, calc(100vw - 28px));
    display: none;
    max-height: min(74vh, 560px);
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(40, 32, 26, 0.09);
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0%, rgba(91, 138, 114, 0.08), transparent 12rem),
        linear-gradient(180deg, var(--famylio-a11y-panel), rgba(255, 250, 245, 0.98));
    box-shadow: var(--famylio-a11y-shadow);
    color: var(--famylio-a11y-ink);
    font-size: 16px !important;
    line-height: 1.35;
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

body.grp-active .famylio-a11y-toggle {
    bottom: max(6px, env(safe-area-inset-bottom));
}

body.grp-minimized .famylio-a11y-toggle {
    bottom: max(6px, env(safe-area-inset-bottom));
}

body.grp-active .famylio-a11y-panel {
    bottom: calc(var(--radio-bar-h, 56px) + max(12px, env(safe-area-inset-bottom)) + 14px);
}

body.grp-minimized .famylio-a11y-panel {
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 60px);
}

.famylio-a11y-panel.is-open {
    display: block;
}

.famylio-a11y-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.famylio-a11y-title {
    margin: 0;
    color: #073764;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.famylio-a11y-close {
    width: 42px;
    height: 42px;
    border: 1px solid var(--famylio-a11y-border);
    border-radius: 16px;
    background: #fff;
    color: var(--famylio-a11y-ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
}

.famylio-a11y-group {
    display: grid;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid rgba(40, 32, 26, 0.08);
}

.famylio-a11y-label {
    color: var(--famylio-a11y-muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.famylio-a11y-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.famylio-a11y-row.is-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(40, 32, 26, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.famylio-a11y-choice,
.famylio-a11y-action {
    min-height: 44px;
    border: 1px solid rgba(40, 32, 26, 0.11);
    border-radius: 15px;
    background: #fff;
    color: var(--famylio-a11y-ink);
    padding: 10px 13px;
    font: inherit;
    font-size: .92rem !important;
    font-weight: 850;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.famylio-a11y-choice {
    width: 100%;
    border-color: transparent;
    box-shadow: none;
}

.famylio-a11y-action i,
.famylio-a11y-choice i {
    font-size: .92em;
    opacity: .82;
}

.famylio-a11y-choice.is-active,
.famylio-a11y-action.is-active {
    border-color: rgba(185, 107, 86, 0.46);
    background: linear-gradient(180deg, rgba(185, 107, 86, 0.13), rgba(185, 107, 86, 0.08));
    color: #7f4638;
    box-shadow: 0 8px 20px rgba(116, 73, 57, 0.08);
}

.famylio-a11y-reset {
    width: 100%;
    background: #fff;
}

@media (hover: hover) and (pointer: fine) {
    .famylio-a11y-toggle:hover,
    .famylio-a11y-choice:hover,
    .famylio-a11y-action:hover,
    .famylio-a11y-close:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(38, 28, 22, 0.12);
    }
}

.famylio-a11y-toggle:focus-visible,
.famylio-a11y-choice:focus-visible,
.famylio-a11y-action:focus-visible,
.famylio-a11y-close:focus-visible {
    outline: 0;
    border-color: rgba(185, 107, 86, 0.38);
    box-shadow: 0 12px 26px rgba(185, 107, 86, 0.14);
}

@media (max-width: 420px) {
    .famylio-a11y-toggle {
        width: 48px;
        height: 48px;
        bottom: calc(var(--radio-bar-h, 0px) + max(76px, env(safe-area-inset-bottom)));
    }

    .famylio-a11y-panel {
        bottom: calc(max(14px, env(safe-area-inset-bottom)) + 58px);
        left: max(10px, env(safe-area-inset-left));
        width: min(360px, calc(100vw - 20px));
        padding: 16px;
    }

    body.grp-active .famylio-a11y-panel {
        bottom: calc(var(--radio-bar-h, 56px) + max(12px, env(safe-area-inset-bottom)) + 12px);
    }

    body.grp-minimized .famylio-a11y-panel {
        bottom: calc(max(6px, env(safe-area-inset-bottom)) + 58px);
    }

    .famylio-a11y-row:not(.is-segmented) {
        gap: 7px;
    }

    .famylio-a11y-action {
        flex: 1 1 100%;
    }
}