/* =========================================================
   RETROBASS R-26
   Phase 12: HOME-System und Displaynavigation
   ========================================================= */

/* ---------------------------------------------------------
   Menüoberfläche
   --------------------------------------------------------- */

.receiver-menu {
    position: absolute;
    z-index: 20;
    inset: 0;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;

    padding:
        clamp(7px, 0.9vw, 11px)
        clamp(8px, 1.1vw, 13px);

    color: #dc8428;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(210, 103, 15, 0.055),
            transparent 56%
        ),
        rgba(4, 3, 2, 0.965);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: scale(0.985);

    transition:
        opacity 240ms ease,
        visibility 0ms linear 240ms,
        transform 240ms ease;
}

.receiver.is-menu-open .receiver-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: scale(1);

    transition-delay: 0ms;
}

.receiver.is-menu-open .radio-interface__main,
.receiver.is-menu-open .radio-interface__footer {
    opacity: 0;
    visibility: hidden;
}

/* ---------------------------------------------------------
   Kopfzeile
   --------------------------------------------------------- */

.receiver-menu__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    min-height: 18px;
    padding-bottom: 4px;

    border-bottom:
        1px solid rgba(220, 123, 25, 0.14);

    color: rgba(226, 136, 42, 0.72);

    font-size: clamp(0.30rem, 0.52vw, 0.42rem);
    letter-spacing: 0.14em;
}

.receiver-menu__back {
    justify-self: start;

    width: 18px;
    height: 14px;
    padding: 0;

    border: 0;

    color: inherit;
    background: transparent;

    font: inherit;
    line-height: 1;

    opacity: 0.68;
}

.receiver-menu__model {
    justify-self: end;
}

/* ---------------------------------------------------------
   Inhaltsbereich
   --------------------------------------------------------- */

.receiver-menu__content {
    position: relative;

    min-height: 0;
    overflow: hidden;
}

.receiver-menu__screen {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(9px);

    transition:
        opacity 190ms ease,
        visibility 0ms linear 190ms,
        transform 190ms ease;
}

.receiver-menu__screen.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0);

    transition-delay: 0ms;
}

.receiver-menu__eyebrow {
    margin:
        clamp(5px, 0.75vw, 8px)
        0
        clamp(4px, 0.65vw, 7px);

    color: rgba(220, 124, 28, 0.45);

    font-size: clamp(0.25rem, 0.43vw, 0.35rem);
    letter-spacing: 0.18em;
    text-align: center;
}

/* ---------------------------------------------------------
   Hauptmenü
   --------------------------------------------------------- */

.receiver-menu__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(4px, 0.65vw, 7px);

    min-height: 0;
}

.receiver-menu__item {
    position: relative;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;

    min-width: 0;
    min-height: clamp(34px, 5vw, 49px);
    padding:
        clamp(5px, 0.7vw, 8px)
        clamp(6px, 0.8vw, 9px);

    border:
        1px solid rgba(214, 116, 20, 0.13);
    border-radius: 3px;

    color: rgba(222, 129, 32, 0.58);

    background:
        linear-gradient(
            145deg,
            rgba(214, 111, 17, 0.025),
            rgba(0, 0, 0, 0.14)
        );

    font: inherit;
    text-align: left;

    transition:
        border-color 150ms ease,
        color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease,
        transform 100ms ease;
}

.receiver-menu__item.is-selected {
    border-color: rgba(235, 152, 61, 0.46);

    color: #e99a45;

    background:
        linear-gradient(
            145deg,
            rgba(223, 127, 27, 0.115),
            rgba(123, 53, 5, 0.045)
        );

    box-shadow:
        inset 0 0 9px rgba(216, 111, 17, 0.055),
        0 0 7px rgba(218, 117, 20, 0.07);
}

.receiver-menu__item.is-selected::before {
    content: "";

    position: absolute;

    top: 6px;
    bottom: 6px;
    left: 0;

    width: 2px;

    border-radius: 0 2px 2px 0;

    background: #e79942;

    box-shadow:
        0 0 5px rgba(229, 143, 53, 0.45);
}

.receiver-menu__item.is-activating {
    transform: scale(0.975);
}

.receiver-menu__icon {
    display: grid;
    place-items: center;

    width: 16px;

    font-size: clamp(0.42rem, 0.72vw, 0.60rem);
}

.receiver-menu__item-copy {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.receiver-menu__item-copy strong {
    overflow: hidden;

    font-size: clamp(0.29rem, 0.50vw, 0.42rem);
    font-weight: 500;
    letter-spacing: 0.09em;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.receiver-menu__item-copy small {
    margin-top: 2px;

    overflow: hidden;

    color: rgba(218, 121, 25, 0.42);

    font-size: clamp(0.22rem, 0.38vw, 0.31rem);
    letter-spacing: 0.04em;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.receiver-menu__arrow {
    opacity: 0.42;
}

/* ---------------------------------------------------------
   Favoritenspeicher
   --------------------------------------------------------- */

.receiver-memory {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 0;

    text-align: center;
}

.receiver-memory__star {
    color: rgba(229, 143, 49, 0.62);

    font-size: clamp(0.85rem, 1.8vw, 1.3rem);

    text-shadow:
        0 0 8px rgba(225, 131, 32, 0.24);
}

.receiver-memory strong {
    max-width: 92%;
    margin-top: 7px;

    overflow: hidden;

    color: #e69942;

    font-size: clamp(0.43rem, 0.78vw, 0.63rem);
    font-weight: 500;
    letter-spacing: 0.10em;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.receiver-memory span:last-child {
    max-width: 88%;
    margin-top: 5px;

    color: rgba(220, 126, 29, 0.48);

    font-size: clamp(0.25rem, 0.42vw, 0.34rem);
    line-height: 1.4;
    letter-spacing: 0.05em;
}

/* ---------------------------------------------------------
   Titelverlauf
   --------------------------------------------------------- */

.receiver-history {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;

    min-height: 0;
    margin: 0;
    padding: 0;

    overflow: hidden;

    list-style: none;
    counter-reset: history;
}

.receiver-history li {
    counter-increment: history;

    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;

    min-height: 24px;
    padding: 3px 5px;

    border-bottom:
        1px solid rgba(217, 117, 20, 0.09);

    color: rgba(225, 132, 35, 0.68);
}

.receiver-history li::before {
    content:
        counter(history, decimal-leading-zero);

    color: rgba(214, 112, 17, 0.35);

    font-size: clamp(0.22rem, 0.37vw, 0.30rem);
}

.receiver-history__track {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.receiver-history__track strong,
.receiver-history__track span {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.receiver-history__track strong {
    font-size: clamp(0.28rem, 0.47vw, 0.39rem);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.receiver-history__track span {
    margin-top: 1px;

    color: rgba(219, 121, 24, 0.41);

    font-size: clamp(0.22rem, 0.36vw, 0.29rem);
}

.receiver-history__empty {
    display: flex !important;
    flex: 1;
    align-items: center;
    justify-content: center;

    border: 0 !important;

    color: rgba(220, 125, 28, 0.42) !important;

    font-size: clamp(0.26rem, 0.44vw, 0.35rem);
    text-align: center;
}

.receiver-history__empty::before {
    display: none;
}

/* ---------------------------------------------------------
   Einstellungen
   --------------------------------------------------------- */

.receiver-settings {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

    min-height: 0;
}

.receiver-settings__row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: clamp(22px, 3.6vw, 31px);
    padding: 0 7px;

    border-bottom:
        1px solid rgba(217, 118, 20, 0.10);

    color: rgba(220, 125, 28, 0.48);

    font-size: clamp(0.27rem, 0.46vw, 0.38rem);
    letter-spacing: 0.10em;
}

.receiver-settings__row strong {
    color: rgba(233, 148, 56, 0.76);
    font-weight: 500;
}

/* ---------------------------------------------------------
   Menüfuß
   --------------------------------------------------------- */

.receiver-menu__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 17px;
    padding-top: 4px;

    border-top:
        1px solid rgba(220, 123, 25, 0.13);

    color: rgba(218, 120, 23, 0.38);

    font-size: clamp(0.21rem, 0.36vw, 0.29rem);
    letter-spacing: 0.08em;
}

/* =========================================================
   Interaktive Geräteeinstellungen
   ========================================================= */

.receiver-settings__row {
    width: 100%;

    border: 0;
    border-bottom:
        1px solid rgba(217, 118, 20, 0.10);

    color: rgba(220, 125, 28, 0.48);
    background: transparent;

    font: inherit;
    text-align: left;

    transition:
        color 150ms ease,
        background 150ms ease,
        box-shadow 150ms ease;
}

button.receiver-settings__row {
    cursor: pointer;
}

button.receiver-settings__row.is-selected {
    color: #e99a45;

    background:
        linear-gradient(
            90deg,
            rgba(224, 127, 27, 0.12),
            rgba(224, 127, 27, 0.015)
        );

    box-shadow:
        inset 2px 0 0 #e79942;
}

button.receiver-settings__row.is-selected strong {
    color: #eca04b;

    text-shadow:
        0 0 5px rgba(226, 133, 40, 0.25);
}

.receiver-settings__row--status {
    cursor: default;
}

/* ---------------------------------------------------------
   Displayhelligkeit
   --------------------------------------------------------- */

.receiver[data-display-brightness="high"]
.display-screen {
    --display-brightness: 1;
}

.receiver[data-display-brightness="mid"]
.display-screen {
    --display-brightness: 0.72;
}

.receiver[data-display-brightness="low"]
.display-screen {
    --display-brightness: 0.46;
}

.receiver .radio-interface,
.receiver .boot-screen,
.receiver .receiver-menu {
    filter:
        brightness(
            var(--display-brightness, 1)
        );

    transition:
        filter 260ms ease;
}

/*
 * Glasreflexion und Displayrahmen bleiben unverändert.
 * Nur die leuchtenden Inhalte werden gedimmt.
 */

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 480px) {
    .receiver-menu {
        padding: 5px 6px;
    }

    .receiver-menu__list {
        gap: 3px;
    }

    .receiver-menu__item {
        min-height: 29px;
        padding: 4px;
    }

    .receiver-menu__item-copy small {
        display: none;
    }

    .receiver-menu__footer {
        font-size: 0.20rem;
    }
}

/* ---------------------------------------------------------
   Reduzierte Bewegung
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .receiver-menu,
    .receiver-menu__screen,
    .receiver-menu__item {
        transition-duration: 1ms;
    }
}