/*
 * Final UI polish layer
 *
 * This file intentionally loads last. It corrects cross-file cascade issues
 * without changing the feature-specific layouts owned by the existing styles.
 */

:root {
    --content-max-width: 1240px;
    --control-min-height: 2.5rem;
    --focus-ring: rgba(37, 99, 235, 0.28);
    --surface-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] {
    --focus-ring: rgba(96, 165, 250, 0.34);
    --surface-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
}

html {
    color-scheme: light;
    scroll-behavior: smooth;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

img,
svg {
    max-width: 100%;
}

fieldset,
.tab-content,
.form-section,
.info-section,
.data-card,
.compact-box,
.compact-form-row > *,
.data-grid > *,
.editor-container > * {
    min-width: 0;
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.tab-btn:focus-visible,
.bridge-nav-btn:focus-visible,
.theme-toggle:focus-visible,
.close-btn:focus-visible,
.notification-close:focus-visible,
.btn-close-reminder:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

:where(button, input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.container {
    width: 100%;
    max-width: var(--content-max-width);
}

/* Header and tool navigation */
.header {
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    box-shadow: 0 1px 0 var(--border-color), 0 10px 30px rgba(15, 23, 42, 0.06);
}

.header-content {
    gap: 1.25rem;
}

.brand-link {
    border-radius: 0.65rem;
}

.feature-nav-bar .container {
    padding-top: 0;
    padding-bottom: 0;
}

.tab-container {
    display: flex;
    width: 100%;
    max-width: 100%;
    padding: 0.4rem 0.1rem 0.55rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.tab-container::-webkit-scrollbar {
    display: block;
    height: 4px;
}

.tab-container::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 999px;
}

.tab-btn,
.bridge-nav-btn {
    min-height: 2.75rem;
}

.tab-btn[data-tab="timing-calculator-tab"] {
    border-top-right-radius: 0.65rem;
    border-bottom-right-radius: 0.65rem;
}

.bridge-nav-btn {
    margin-inline-start: auto;
    flex: 0 0 auto;
}

.bridge-nav-btn:disabled {
    color: color-mix(in srgb, #fff 78%, transparent);
    background: color-mix(in srgb, #6366f1 62%, var(--bg-tertiary));
}

/* Keep tablet headers compact; the drawer takes over at the mobile breakpoint. */
@media (min-width: 769px) and (max-width: 1024px) {
    .header-content,
    .nav-wrapper,
    .main-nav,
    .action-buttons {
        flex-direction: row;
        width: auto;
    }

    .header-content {
        align-items: center;
    }

    .header-actions {
        width: auto;
        margin-inline-start: auto;
    }

    .nav-wrapper {
        align-items: center;
    }

    .nav-link,
    .btn-contact,
    .btn-donate {
        width: auto;
    }
}

/* Content surfaces: visual feedback without moving surrounding content. */
.main-content {
    margin-top: clamp(1rem, 2vw, 1.75rem);
}

.main-content .form-section,
.main-content .info-section,
.main-content .data-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.main-content .form-section:hover,
.main-content .info-section:hover,
.main-content .data-card:hover {
    transform: none;
}

.main-content :where(p, li, dd, .value, .help-text) {
    overflow-wrap: anywhere;
}

pre,
.hex-viewer,
.hex-content,
.encoded-edid-preview {
    max-width: 100%;
    overflow-x: auto;
}

code,
.crypto-address,
.raw-extension-hex,
.raw-data-block-hex {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Encoder typography was too small to scan comfortably. */
#encoder-tab {
    --compact-font-h3: 1rem;
    --compact-font-h4: 0.9rem;
    --compact-font-h5: 0.84rem;
    --compact-font-h6: 0.8rem;
    --compact-font-label: 0.75rem;
    --compact-font-input: 0.825rem;
    --compact-font-help: 0.72rem;
    --compact-padding-section: 0.9rem;
    --compact-padding-block: 0.625rem;
    --compact-padding-input: 0.55rem 0.625rem;
    --compact-margin-section: 0.75rem;
    --compact-margin-group: 0.55rem;
    --compact-gap-grid: 0.55rem;
    --compact-gap-small: 0.35rem;
}

#encoder-tab .form-group label {
    line-height: 1.35;
}

#encoder-tab .form-group input,
#encoder-tab .form-group select,
#encoder-tab .form-group textarea,
#encoder-tab .compact-select {
    min-height: var(--control-min-height);
    line-height: 1.25;
}

#encoder-tab .form-group textarea {
    min-height: 5.5rem;
    resize: vertical;
}

#encoder-tab .form-group input::placeholder,
#contactForm :where(input, textarea)::placeholder {
    color: var(--text-muted);
    opacity: 0.9;
}

/* Avoid painting every untouched valid field green or invalid field red. */
#encoder-tab .form-group input:valid,
#encoder-tab .form-group input:invalid {
    border-color: var(--border-color);
    box-shadow: none;
}

#encoder-tab .form-group input:user-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

#encoder-tab .form-group input:focus,
#encoder-tab .form-group input:valid:focus,
#encoder-tab .form-group input:invalid:focus,
#encoder-tab .form-group select:focus,
#encoder-tab .form-group textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-export,
.btn-submit,
.btn-link,
.btn-add-timing,
.btn-add-extension,
.btn-add-data-block {
    min-height: var(--control-min-height);
    align-items: center;
    justify-content: center;
}

.export-actions {
    align-items: center;
}

.encoder-import-report {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.encoder-import-report[hidden],
.preserved-data-notice[hidden] {
    display: none !important;
}

.encoder-import-report ul {
    padding-inline-start: 0.25rem;
}

.encoder-import-report li + li {
    margin-top: 0.3rem;
}

.preserved-data-notice {
    align-items: flex-start;
    flex-wrap: wrap;
    line-height: 1.45;
}

.raw-cea-data-block {
    gap: 0.75rem;
}

/* Dialogs and transient UI */
.modal {
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.modal-content {
    width: min(700px, 100%);
    max-height: calc(100dvh - 2rem);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
}

.modal-header {
    flex: 0 0 auto;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem 1rem 0 0;
}

.modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.close-btn,
.notification-close,
.btn-close-reminder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    line-height: 1;
}

.notification-container {
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    width: min(25rem, calc(100vw - 2rem));
}

.notification-message {
    min-width: 0;
}

/* Keep persistent floating controls from covering each other. */
.theme-toggle {
    right: auto;
    left: max(1rem, env(safe-area-inset-left));
    bottom: max(1rem, env(safe-area-inset-bottom));
}

.donation-reminder {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
}

/* Mobile navigation remains one predictable, horizontally scrollable row. */
@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }

    .feature-nav-bar .container {
        padding-inline: 0.75rem;
    }

    .tab-container {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0;
        min-width: 0;
        margin: 0;
        padding: 0.45rem 0 0.6rem;
        scroll-snap-type: inline proximity;
    }

    .tab-btn,
    .bridge-nav-btn {
        flex: 0 0 auto;
        min-width: max-content;
        min-height: 2.75rem;
        scroll-snap-align: start;
    }

    .tab-btn {
        padding: 0.55rem 0.75rem;
    }

    .tab-icon {
        width: 0.875rem;
        height: 0.875rem;
    }

    .tab-label,
    .bridge-nav-btn {
        font-size: 0.75rem;
    }

    .bridge-nav-btn {
        margin-inline-start: 0.5rem;
    }

    .main-content,
    .container .tab-content.active {
        padding-top: 0.5rem;
    }

    #encoder-tab {
        --compact-font-label: 0.78rem;
        --compact-font-input: 0.875rem;
        --compact-font-help: 0.75rem;
        --compact-padding-section: 0.75rem;
        --compact-padding-input: 0.625rem;
    }

    .notification-container {
        left: max(0.75rem, env(safe-area-inset-left));
        right: max(0.75rem, env(safe-area-inset-right));
        width: auto;
    }

    .donation-reminder {
        left: max(0.75rem, env(safe-area-inset-left));
        right: max(0.75rem, env(safe-area-inset-right));
    }
}

@media (max-width: 520px) {
    .brand-logo {
        width: 2.25rem;
        height: 2.25rem;
        padding: 0.4rem;
    }

    .header-description {
        display: none;
    }

    .main-content {
        padding-inline: 0.75rem;
    }

    .export-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .export-actions > button,
    .data-blocks-controls > button,
    .data-blocks-controls > select {
        width: 100%;
    }

    .raw-cea-data-block {
        align-items: stretch;
        flex-direction: column;
    }

    .modal {
        padding: 0;
        align-items: flex-end;
    }

    .modal-content {
        width: 100%;
        max-height: 94dvh;
        margin: 0;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 1rem 1rem 0 0;
    }

    .modal-header {
        padding: 1rem;
    }

    .donation-reminder-content {
        flex-wrap: wrap;
    }

    .donation-reminder-text {
        min-width: 10rem;
    }

    .donation-reminder-actions {
        margin-inline-start: auto;
    }
}

@media (hover: none) and (pointer: coarse) {
    button:active,
    .tab-btn:active,
    .bridge-nav-btn:active {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

@media (prefers-contrast: more) {
    .form-section,
    .info-section,
    .data-card,
    input,
    select,
    textarea,
    button {
        border-width: 2px;
    }
}

@media print {
    .bridge-nav-btn,
    #btn-edit-in-encoder,
    .encoder-import-report {
        display: none !important;
    }
}