/* Phase 1 / Sprint 11 — final commercial polish and launch readiness */
:root {
    --s11-radius-control: 10px;
    --s11-radius-card: 16px;
    --s11-radius-hero: 20px;
    --s11-border: color-mix(in srgb, currentColor 13%, transparent);
    --s11-shadow-sm: 0 6px 18px rgba(15, 23, 42, .06);
    --s11-shadow-md: 0 14px 36px rgba(15, 23, 42, .1);
    --s11-focus: #f59e0b;
    --s11-duration: 160ms;
}

html {
    hanging-punctuation: first last;
    scrollbar-gutter: stable;
}

body {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

::selection {
    background: color-mix(in srgb, #f59e0b 34%, transparent);
    color: inherit;
}

.skip-link {
    border-radius: 0 0 var(--s11-radius-control) var(--s11-radius-control);
    box-shadow: var(--s11-shadow-md);
    inset-block-start: max(0px, env(safe-area-inset-top));
    min-height: 44px;
    z-index: 12000 !important;
}

main:focus,
#main-content:focus {
    outline: none;
}

main:focus-visible,
#main-content:focus-visible {
    outline: 3px solid var(--s11-focus);
    outline-offset: -3px;
}

/* Final shared geometry for components that intentionally represent the same role. */
:is(.app-card, .workflow-card, .review-content-card, .property-section-card, .dashboard-chart-card, .metric-card, .admin-summary-card, .docs-card, .docs-info-card, .docs-category-card, .docs-article-row, .docs-video-card, .beta-admin-panel, .beta-report-card) {
    border-color: var(--s11-border);
    border-radius: var(--s11-radius-card) !important;
}

:where(.app-card, .workflow-card, .review-content-card, .property-section-card, .dashboard-chart-card, .metric-card, .admin-summary-card) {
    box-shadow: var(--s11-shadow-sm);
}

:where(.dashboard-hero, .workflow-hero, .review-hero, .property-details-hero, .search-v3-topbar, .admin-hero-pro, .docs-hero) {
    border-radius: var(--s11-radius-hero);
}

:where(button, .btn, [role="button"], input, select, textarea, summary) {
    border-radius: var(--s11-radius-control);
}

:where(button, .btn, [role="button"], a, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--s11-focus) !important;
    outline-offset: 3px !important;
}

:where(.btn, button, [role="button"]):not(:disabled, [aria-disabled="true"]) {
    transition-duration: var(--s11-duration);
    transition-property: background-color, border-color, box-shadow, color, opacity, transform;
    transition-timing-function: ease;
}

:where(.btn, button, [role="button"]):disabled,
:where(.btn, button, [role="button"])[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .62;
}

/* Keep keyboard users oriented inside long commercial and administrative pages. */
.sprint11-section-anchor {
    scroll-margin-block-start: calc(var(--s10-nav-height, 64px) + 16px);
}

.sprint11-auto-render {
    content-visibility: auto;
    contain-intrinsic-block-size: auto 620px;
}

.sprint11-image-pending {
    background: linear-gradient(105deg,
        color-mix(in srgb, currentColor 5%, transparent) 20%,
        color-mix(in srgb, currentColor 10%, transparent) 38%,
        color-mix(in srgb, currentColor 5%, transparent) 58%);
    background-size: 200% 100%;
}

.sprint11-image-ready {
    background: transparent;
}

.sprint11-offline-status {
    align-items: center;
    background: #172033;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    bottom: max(16px, env(safe-area-inset-bottom));
    box-shadow: var(--s11-shadow-md);
    color: #fff;
    display: flex;
    font-size: .82rem;
    font-weight: 750;
    gap: 8px;
    inset-inline-start: 50%;
    max-width: min(92vw, 460px);
    min-height: 44px;
    padding: 8px 16px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 11000;
}

[dir="rtl"] .sprint11-offline-status {
    transform: translateX(50%);
}

.sprint11-offline-status::before {
    background: #fbbf24;
    border-radius: 50%;
    content: "";
    flex: 0 0 8px;
    height: 8px;
}

/* Loading and empty states retain a stable footprint and one animation language. */
:where(.loading-overlay, .s8-chart-loading, .s7-map-loading, .skeleton-card, [data-loading-state]) {
    animation-duration: 1.25s;
    animation-timing-function: linear;
}

:where(.empty-state, .docs-empty, .s8-empty-state, [data-empty-state]) {
    border-radius: var(--s11-radius-card);
    min-height: 120px;
}

/* Administrative support tables remain contained without changing their semantics. */
.beta-checklist-table-wrap {
    border: 1px solid var(--s11-border);
    border-radius: var(--s11-radius-control);
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.beta-checklist-table-wrap:focus-visible {
    outline: 3px solid var(--s11-focus);
    outline-offset: 3px;
}

.beta-checklist-table th {
    background: var(--surface, var(--home-surface, #fff));
    position: sticky;
    top: 0;
    z-index: 1;
}

@media (max-width: 760px) {
    html { scrollbar-gutter: auto; }

    :where(.app-card, .workflow-card, .review-content-card, .property-section-card, .dashboard-chart-card, .metric-card, .admin-summary-card) {
        box-shadow: 0 4px 14px rgba(15, 23, 42, .055);
    }

    .sprint11-offline-status {
        inset-inline: var(--s10-mobile-gutter, 12px);
        justify-content: center;
        transform: none;
    }

    [dir="rtl"] .sprint11-offline-status { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
    }

    .sprint11-image-pending {
        animation: none !important;
        background-position: 0 0;
    }

    :where(.btn, button, [role="button"]) {
        transition-duration: .01ms !important;
    }
}

@media (forced-colors: active) {
    :where(.app-card, .workflow-card, .review-content-card, .property-section-card, .dashboard-chart-card, .metric-card, .admin-summary-card, .beta-checklist-table-wrap) {
        border: 1px solid CanvasText;
        box-shadow: none;
    }

    .sprint11-offline-status {
        background: Canvas;
        border-color: CanvasText;
        color: CanvasText;
    }
}

@media print {
    .sprint11-auto-render {
        contain: none !important;
        content-visibility: visible !important;
    }

    .sprint11-offline-status { display: none !important; }
}