/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

@layer components {
    .tuner {
        min-height: 100svh;
        display: grid;
        place-items: start center;
        padding: var(--space-l) var(--space-s);
        background: var(--color-surface);
        color: var(--color-text);
        text-align: center;

        @media (min-width: 48rem) {
            padding: var(--space-xl) var(--space-m);
        }

        /* ── Activate screen ─────────────────────────────────────────── */

        & .tuner__activate {
            display: grid;
            gap: var(--space-m);
            justify-items: center;
            max-width: var(--max-content);
            padding-block: var(--space-2xl);
        }

        & .tuner__eyebrow {
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 500;
            font-size: var(--size-step-0);
            color: color-mix(in oklab, var(--color-text) 60%, transparent);
        }

        & .tuner__headline {
            font-family: var(--font-serif);
            font-size: var(--size-step-3);
            font-weight: 600;
            line-height: 1.1;
            margin: 0;
        }

        & .tuner__subline {
            font-size: var(--size-step-1);
            color: color-mix(in oklab, var(--color-text) 75%, transparent);
            max-width: 48ch;
            margin: 0;
        }

        & .tuner__btn {
            /* Base button layout can stay here if needed, but visual is global */
        }

        /* ── Error message ───────────────────────────────────────────── */

        & .tuner__error {
            color: var(--color-accent);
            font-size: var(--size-step-0);
            max-width: var(--max-content);
            margin: 0;
            padding: var(--space-s) var(--space-m);
            border-radius: 8px;
            background: color-mix(in oklab, var(--color-accent) 12%, transparent);
            border: 1px solid color-mix(in oklab, var(--color-accent) 30%, transparent);
        }

        /* ── Controls (Lyre select & Edit toggle) ────────────────────── */

        & .tuner__controls {
            display: flex;
            flex-direction: column;
            gap: var(--space-m);
            justify-content: center;
            align-items: stretch;
            margin-bottom: var(--space-m);
            padding: var(--space-s) var(--space-m);
            background: color-mix(in oklab, var(--color-surface) 95%, var(--color-text));
            border-radius: 12px;
            border: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);

            @media (min-width: 48rem) {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                gap: var(--space-l);
            }
        }

        & .tuner__control-group {
            display: flex;
            align-items: center;
            gap: var(--space-s);
        }

        & .tuner__label {
            font-size: var(--size-step-0);
            font-weight: 500;
            color: color-mix(in oklab, var(--color-text) 80%, transparent);
        }

        & .tuner__select {
            /* Visual is global via .select class */
        }

        & .tuner__toggle {
            display: flex;
            align-items: center;
            gap: var(--space-s);
            cursor: pointer;
            font-size: var(--size-step-0);
            font-weight: 500;
            color: color-mix(in oklab, var(--color-text) 80%, transparent);
        }

        /* ── Main body (shown after mic permission) ──────────────────── */

        & .tuner__body {
            width: min(100%, 820px);
            display: grid;
            gap: var(--space-xl);
            text-align: left;
        }

        & .tuner__body-title {
            font-family: var(--font-serif);
            font-size: var(--size-step-1);
            font-weight: 600;
            margin: 0;
            color: color-mix(in oklab, var(--color-text) 70%, transparent);
            text-align: center;
        }

        /* ── String selection grid ───────────────────────────────────── */

        & .tuner__string-grid {
            display: grid;
            /* auto-fill so the grid adapts from 1 column on tiny phones to 19 on desktop */
            grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
            gap: var(--space-xs);
        }

        /* ── String wrapper ───────────────────────────────────── */

        & .tuner__string-wrapper {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        & .tuner__string-btn {
            /* Minimum touch target: 44×44 px (WCAG 2.5.5) */
            min-height: 44px;
            min-width: 44px;
            appearance: none;
            border: 1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
            border-radius: 8px;
            background: transparent;
            color: var(--color-text);
            font-family: var(--font-serif);
            font-size: var(--size-step-0);
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

            /* Active / selected string */

            &[aria-pressed="true"] {
                background: var(--color-primary);
                color: #1d1a14;
                border-color: var(--color-primary);
                font-weight: 600;
            }

            &:hover:not([aria-pressed="true"]) {
                background: color-mix(in oklab, var(--color-primary) 10%, transparent);
                border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
            }

            &:focus-visible {
                outline: 2px solid var(--color-primary);
                outline-offset: 2px;
            }

            /* Farebné kódovanie pre C a F */
            &[data-note-base="C"] {
                border-color: color-mix(in oklab, #ef4444 40%, transparent);
                color: #ef4444;

                &[aria-pressed="true"] {
                    background: #ef4444;
                    color: white;
                    border-color: #ef4444;
                }

                &:hover:not([aria-pressed="true"]) {
                    background: color-mix(in oklab, #ef4444 10%, transparent);
                }
            }

            &[data-note-base="F"] {
                border-color: color-mix(in oklab, #3b82f6 40%, transparent);
                color: #3b82f6;

                &[aria-pressed="true"] {
                    background: #3b82f6;
                    color: white;
                    border-color: #3b82f6;
                }

                &:hover:not([aria-pressed="true"]) {
                    background: color-mix(in oklab, #3b82f6 10%, transparent);
                }
            }
        }

        /* ── Canvas graph wrapper ────────────────────────────────────── */

        & .tuner__graph {
            /* Full-width wrapper — the Graph component fills it */
        }

        /* ── Feedback strip ──────────────────────────────────────────── */

        & .tuner__feedback {
            display: grid;
            grid-template-columns: 1fr;
            justify-items: center;
            align-items: center;
            gap: var(--space-s);
            padding: var(--space-m) var(--space-l);
            border-radius: 12px;
            background: color-mix(in oklab, var(--color-surface) 88%, var(--color-primary));
            border: 1px solid color-mix(in oklab, var(--color-primary) 20%, transparent);
            text-align: center;

            @media (min-width: 48rem) {
                grid-template-columns: auto 1fr;
                justify-items: start;
                text-align: left;
                gap: var(--space-m);
            }
        }

        & .tuner__cents {
            font-family: var(--font-serif);
            font-size: var(--size-step-2);
            font-weight: 600;
            color: var(--color-primary);
            min-width: 6ch;
            text-align: center;

            @media (min-width: 48rem) {
                text-align: right;
            }
        }

        & .tuner__message {
            font-size: var(--size-step-0);
            margin: 0;
        }
    }
}