euv-ui 0.30.8

use super::*;

class! {
    pub(crate) c_euv_tooltip {
        position: "relative";
        display: "inline-flex";
        align-items: "center";
    }

    pub(crate) c_euv_tooltip_bubble {
        position: "absolute";
        z-index: "100";
        padding: format!("{} {}", var!(space-xs), var!(space-sm));
        box-sizing: "border-box";
        border: format!("1px solid {}", var!(border));
        border-radius: "0px";
        background: var!(accent);
        color: var!(text-on-accent);
        font-size: var!(font-xs);
        font-weight: "500";
        line-height: "1.3";
        white-space: "nowrap";
        opacity: "0";
        visibility: "hidden";
        pointer-events: "none";
        transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
    }

    pub(crate) c_euv_tooltip_bubble_top {
        position: "absolute";
        z-index: "100";
        padding: format!("{} {}", var!(space-xs), var!(space-sm));
        box-sizing: "border-box";
        border: format!("1px solid {}", var!(border));
        border-radius: "0px";
        background: var!(accent);
        color: var!(text-on-accent);
        font-size: var!(font-xs);
        font-weight: "500";
        line-height: "1.3";
        white-space: "nowrap";
        opacity: "0";
        visibility: "hidden";
        pointer-events: "none";
        bottom: "calc(100% + 8px)";
        left: "50%";
        transform: "translateX(-50%)";
        transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
    }

    pub(crate) c_euv_tooltip_bubble_bottom {
        position: "absolute";
        z-index: "100";
        padding: format!("{} {}", var!(space-xs), var!(space-sm));
        box-sizing: "border-box";
        border: format!("1px solid {}", var!(border));
        border-radius: "0px";
        background: var!(accent);
        color: var!(text-on-accent);
        font-size: var!(font-xs);
        font-weight: "500";
        line-height: "1.3";
        white-space: "nowrap";
        opacity: "0";
        visibility: "hidden";
        pointer-events: "none";
        top: "calc(100% + 8px)";
        left: "50%";
        transform: "translateX(-50%)";
        transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
    }

    pub(crate) c_euv_tooltip_bubble_left {
        position: "absolute";
        z-index: "100";
        padding: format!("{} {}", var!(space-xs), var!(space-sm));
        box-sizing: "border-box";
        border: format!("1px solid {}", var!(border));
        border-radius: "0px";
        background: var!(accent);
        color: var!(text-on-accent);
        font-size: var!(font-xs);
        font-weight: "500";
        line-height: "1.3";
        white-space: "nowrap";
        opacity: "0";
        visibility: "hidden";
        pointer-events: "none";
        top: "50%";
        right: "calc(100% + 8px)";
        transform: "translateY(-50%)";
        transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
    }

    pub(crate) c_euv_tooltip_bubble_right {
        position: "absolute";
        z-index: "100";
        padding: format!("{} {}", var!(space-xs), var!(space-sm));
        box-sizing: "border-box";
        border: format!("1px solid {}", var!(border));
        border-radius: "0px";
        background: var!(accent);
        color: var!(text-on-accent);
        font-size: var!(font-xs);
        font-weight: "500";
        line-height: "1.3";
        white-space: "nowrap";
        opacity: "0";
        visibility: "hidden";
        pointer-events: "none";
        top: "50%";
        left: "calc(100% + 8px)";
        transform: "translateY(-50%)";
        transition: format!("opacity {} {}", var!(duration-fast), var!(ease-out));
    }

    pub(crate) c_euv_popover {
        position: "relative";
        display: "inline-flex";
        align-items: "center";
    }

    pub(crate) c_euv_popover_body {
        position: "absolute";
        z-index: "100";
        min-width: "200px";
        box-sizing: "border-box";
        border-radius: "0px";
        background: var!(background);
        color: var!(foreground);
        font-size: var!(font-base);
        transition: format!("opacity {} {}, visibility {} {}", var!(duration-overlay), var!(ease-out), var!(duration-overlay), var!(ease-out));
    }

    pub(crate) c_euv_popover_body_open {
        position: "absolute";
        z-index: "100";
        min-width: "200px";
        box-sizing: "border-box";
        border: format!("1px solid {}", var!(border));
        box-shadow: var!(shadow-sm);
        border-radius: "0px";
        background: var!(background);
        color: var!(foreground);
        font-size: var!(font-base);
        opacity: "1";
        visibility: "visible";
        pointer-events: "auto";
        transition: format!("opacity {} {}, visibility {} {}", var!(duration-overlay), var!(ease-out), var!(duration-overlay), var!(ease-out));
    }

    pub(crate) c_euv_popover_body_closed {
        position: "absolute";
        z-index: "100";
        min-width: "200px";
        box-sizing: "border-box";
        border: format!("1px dashed {}", var!(border));
        border-radius: "0px";
        background: var!(background);
        color: var!(foreground);
        font-size: var!(font-base);
        opacity: "0";
        visibility: "hidden";
        pointer-events: "none";
        transition: format!("opacity {} {}, visibility {} {}", var!(duration-overlay), var!(ease-out), var!(duration-overlay), var!(ease-out));
    }

    pub(crate) c_euv_popover_header {
        display: "flex";
        align-items: "center";
        justify-content: "space-between";
        gap: var!(space-sm);
        padding: format!("{} {}", var!(space-sm), var!(space-md));
        border-bottom: format!("1px dashed {}", var!(border));
    }

    pub(crate) c_euv_popover_title {
        font-size: var!(font-base);
        font-weight: "600";
        color: var!(foreground);
        margin: "0px";
    }

    pub(crate) c_euv_calendar {
        display: "flex";
        flex-direction: "column";
        gap: var!(space-md);
        width: "100%";
        box-sizing: "border-box";
        padding: var!(space-md);
        border: format!("1px solid {}", var!(border));
        background: var!(background);
    }

    pub(crate) c_euv_calendar_header {
        display: "flex";
        align-items: "center";
        justify-content: "space-between";
        gap: var!(space-sm);
    }

    pub(crate) c_euv_calendar_title {
        font-size: var!(font-base);
        font-weight: "600";
        color: var!(foreground);
        margin: "0px";
    }

    pub(crate) c_euv_calendar_nav {
        display: "flex";
        align-items: "center";
        gap: var!(space-xs);
    }

    pub(crate) c_euv_calendar_weekdays {
        display: "grid";
        grid-template-columns: "repeat(7, 1fr)";
        gap: "0px";
        width: "100%";
    }

    pub(crate) c_euv_calendar_weekday {
        display: "flex";
        align-items: "center";
        justify-content: "center";
        min-height: "24px";
        font-size: var!(font-xs);
        font-weight: "600";
        color: var!(muted-foreground);
        border-bottom: format!("1px dashed {}", var!(border));
    }

    pub(crate) c_euv_calendar_grid {
        display: "grid";
        grid-template-columns: "repeat(7, 1fr)";
        gap: "0px";
        width: "100%";
    }

    pub(crate) c_euv_calendar_day {
        display: "flex";
        align-items: "center";
        justify-content: "center";
        min-height: "36px";
        box-sizing: "border-box";
        font-size: var!(font-base);
        font-weight: "500";
        color: var!(foreground);
        background: var!(background);
        border: "1px solid transparent";
        border-radius: "0px";
        cursor: "pointer";
        touch-action: "manipulation";
        user-select: "none";
        -webkit-user-select: "none";
        :hover {
            background: var!(accent-muted);
            color: var!(accent);
        }
    }

    pub(crate) c_euv_calendar_day_muted {
        display: "flex";
        align-items: "center";
        justify-content: "center";
        min-height: "36px";
        box-sizing: "border-box";
        font-size: var!(font-base);
        font-weight: "400";
        color: var!(muted-foreground);
        background: var!(background);
        border: "1px dashed transparent";
        border-radius: "0px";
        cursor: "pointer";
        touch-action: "manipulation";
        user-select: "none";
        -webkit-user-select: "none";
    }

    pub(crate) c_euv_calendar_day_today {
        display: "flex";
        align-items: "center";
        justify-content: "center";
        min-height: "36px";
        box-sizing: "border-box";
        font-size: var!(font-base);
        font-weight: "700";
        color: var!(foreground);
        background: var!(background);
        border: format!("2px solid {}", var!(accent));
        border-radius: "0px";
        cursor: "pointer";
        touch-action: "manipulation";
        user-select: "none";
        -webkit-user-select: "none";
        :hover {
            background: var!(accent-muted);
            color: var!(accent);
        }
    }

    pub(crate) c_euv_calendar_day_selected {
        display: "flex";
        align-items: "center";
        justify-content: "center";
        min-height: "36px";
        box-sizing: "border-box";
        font-size: var!(font-base);
        font-weight: "600";
        color: var!(text-on-accent);
        background: var!(accent);
        border: format!("2px solid {}", var!(accent));
        border-radius: "0px";
        cursor: "pointer";
        touch-action: "manipulation";
        user-select: "none";
        -webkit-user-select: "none";
    }

    pub(crate) c_euv_upload {
        display: "flex";
        flex-direction: "column";
        gap: var!(space-md);
        width: "100%";
    }

    pub(crate) c_euv_upload_input {
        position: "absolute";
        width: "1px";
        height: "1px";
        opacity: "0";
        pointer-events: "none";
        margin: "0px";
        padding: "0px";
        border: "none";
        outline: "none";
    }

    pub(crate) c_euv_upload_drop_active {
        display: "flex";
        flex-direction: "column";
        align-items: "center";
        justify-content: "center";
        gap: var!(space-sm);
        width: "100%";
        min-height: var!(space-7xl);
        box-sizing: "border-box";
        padding: var!(space-2xl);
        border: format!("2px solid {}", var!(accent));
        background: var!(accent-muted);
        color: var!(accent);
        font-size: var!(font-base);
        text-align: "center";
        cursor: "pointer";
        touch-action: "manipulation";
        user-select: "none";
        -webkit-user-select: "none";
        @media ((max-width: 767px)) {
            padding: var!(space-lg);
        }
    }

    pub(crate) c_euv_upload_list {
        display: "flex";
        flex-direction: "column";
        gap: var!(space-sm);
        width: "100%";
    }

    pub(crate) c_euv_upload_file {
        display: "flex";
        align-items: "center";
        justify-content: "space-between";
        gap: var!(space-sm);
        width: "100%";
        min-height: var!(min-height-base);
        box-sizing: "border-box";
        padding: format!("{} {}", var!(space-sm), var!(space-md));
        border: format!("1px dashed {}", var!(border));
    }

    pub(crate) c_euv_upload_file_name {
        font-size: var!(font-sm);
        font-weight: "500";
        color: var!(foreground);
        overflow: "hidden";
        text-overflow: "ellipsis";
        white-space: "nowrap";
        min-width: "0px";
    }

    pub(crate) c_euv_upload_file_size {
        font-size: var!(font-xs);
        color: var!(muted-foreground);
        font-family: "ui-monospace, monospace";
        white-space: "nowrap";
        flex-shrink: "0";
    }

    pub(crate) c_euv_upload_file_status_pending {
        display: "flex";
        align-items: "center";
        gap: var!(space-xs);
        font-size: var!(font-xs);
        font-weight: "400";
        color: var!(muted-foreground);
        border: format!("1px dashed {}", var!(border));
        padding: "0px";
        white-space: "nowrap";
        flex-shrink: "0";
    }

    pub(crate) c_euv_upload_file_status_uploading {
        display: "flex";
        align-items: "center";
        gap: var!(space-xs);
        font-size: var!(font-xs);
        font-weight: "500";
        color: var!(foreground);
        border: format!("1px solid {}", var!(border));
        padding: "0px";
        white-space: "nowrap";
        flex-shrink: "0";
    }

    pub(crate) c_euv_upload_file_status_done {
        display: "flex";
        align-items: "center";
        gap: var!(space-xs);
        font-size: var!(font-xs);
        font-weight: "600";
        color: var!(accent);
        border: format!("2px solid {}", var!(accent));
        padding: "0px";
        white-space: "nowrap";
        flex-shrink: "0";
    }

    pub(crate) c_euv_upload_file_status_failed {
        display: "flex";
        align-items: "center";
        gap: var!(space-xs);
        font-size: var!(font-xs);
        font-weight: "700";
        color: var!(muted-foreground);
        border: format!("1px dashed {}", var!(foreground));
        padding: "0px";
        text-decoration: "line-through";
        white-space: "nowrap";
        flex-shrink: "0";
    }

    pub c_euv_feature_grid {
        display: "grid";
        grid-template-columns: "repeat(auto-fit, minmax(220px, 1fr))";
        gap: var!(space-md);
        width: "100%";
        @media ((max-width: 767px)) {
            grid-template-columns: "1fr";
        }
    }

    pub c_euv_feature_card {
        display: "flex";
        flex-direction: "column";
        gap: var!(space-sm);
        padding: var!(space-lg);
        overflow: "hidden";
        box-sizing: "border-box";
        border: format!("1px dashed {}", var!(border));
    }

    pub c_euv_feature_header {
        display: "flex";
        align-items: "center";
        gap: var!(space-sm);
    }

    pub c_euv_feature_icon {
        display: "flex";
        align-items: "center";
        justify-content: "center";
        font-size: var!(font-2xl);
        line-height: "1";
        color: var!(foreground);
        flex-shrink: "0";
    }

    pub c_euv_feature_name {
        font-size: var!(font-lg);
        font-weight: "600";
        color: var!(foreground);
        margin: "0px";
        overflow: "hidden";
        text-overflow: "ellipsis";
        white-space: "nowrap";
    }

    pub c_euv_feature_desc {
        font-size: var!(font-sm);
        color: var!(foreground);
        margin: "0px";
    }

    // ═══════════════════════════════════════════════════════════════════════════
    // Modal
    // ═══════════════════════════════════════════════════════════════════════════

    pub(crate) c_modal_overlay {
        position: "fixed";
        top: "0px";
        left: "0px";
        width: "100%";
        height: "100%";
        background: var!(bg-overlay);
        contain: "layout style paint";
        display: "flex";
        align-items: "center";
        justify-content: "center";
        z-index: "1000";
        animation: format!("euv-fade-in {} {}", var!(duration-modal-overlay), var!(ease-out));
        @media ((max-width: 767px)) {
            align-items: "center";
            justify-content: "center";
        }
    }

    pub(crate) c_modal_content {
        background: var!(background);
        padding: "0px";
        max-width: "480px";
        width: "90%";
        animation: format!("euv-scale-in-modal {} {}", var!(duration-modal-content), var!(ease-bounce));
        overflow: "hidden";
        color: var!(foreground);
        box-sizing: "border-box";
        @media ((max-width: 767px)) {
            max-width: "100%";
            width: "calc(100% - 32px)";
            // Percentage of the fixed overlay (which is already the full
            // window), so the sheet is capped by the screen it sits on
            // rather than by a viewport unit that ignores the safe-area
            // insets the overlay does not account for.
            max-height: "85%";
            overflow-y: "auto";
        }
    }

    pub(crate) c_modal_header {
        display: "flex";
        justify-content: "space-between";
        align-items: "center";
        padding: format!("{} {} 0px {}", var!(space-md), var!(space-xl), var!(space-xl));
    }

    pub(crate) c_modal_title {
        margin: "0px";
        font-size: var!(font-xl);
        font-weight: "600";
        color: "inherit";
    }

    pub(crate) c_modal_body {
        padding: format!("0px {} {} {}", var!(space-xl), var!(space-md), var!(space-xl));
        color: "inherit";
    }

    pub c_modal_actions {
        display: "flex";
        flex-wrap: "wrap";
        gap: var!(space-md);
        margin: format!("{} 0px", var!(space-md));
    }

    // ═══════════════════════════════════════════════════════════════════════════
    // VConsole Panel
    // ═══════════════════════════════════════════════════════════════════════════

    pub(crate) c_vconsole_badge {
        position: "absolute";
        top: "-6px";
        right: "-8px";
        min-width: "18px";
        height: "18px";
        background: var!(background);
        color: var!(foreground);
        font-size: "10px";
        font-weight: "600";
        display: "flex";
        align-items: "center";
        justify-content: "center";
        padding: format!("0px {}", var!(space-xs));
        border: format!("1px solid {}", var!(accent));
        pointer-events: "none";
        transition: format!("transform {} {}, opacity {} {}", var!(duration-normal), var!(ease-out), var!(duration-normal), var!(ease-out));
    }

    pub(crate) c_vconsole_overlay {
        position: "fixed";
        top: "0px";
        left: "0px";
        right: "0px";
        bottom: "0px";
        z-index: "10000";
        background: var!(bg-overlay);
        contain: "layout style paint";
        transition: format!("opacity {} {}", var!(duration-overlay), var!(ease-out));
    }

    pub(crate) c_vconsole_overlay_hidden {
        opacity: "0";
        pointer-events: "none";
    }

    pub(crate) c_vconsole_panel {
        position: "fixed";
        bottom: "0px";
        left: "0px";
        right: "0px";
        // A fixed element with `bottom` anchored resolves percentage heights
        // against the initial containing block, so `76%` and `76vh` measure
        // the same box here — the percentage form is used to keep viewport
        // units out of the codebase. The safe-area inset is still subtracted
        // so the panel clears a home indicator.
        height: format!("calc(76% - {})", var!(safe-area-inset-bottom));
        background: var!(background);
        z-index: "10001";
        display: "flex";
        flex-direction: "column";
        contain: "layout style paint";
        will-change: "transform";
        transition: format!("transform {} {}", var!(duration-overlay), var!(ease-out));
        overflow: "hidden";
        padding: format!("{} {}", var!(padding-main-top), var!(edge-gutter));
        @media ((max-width: 767px)) {
            padding: format!("{} {}", var!(space-md), var!(edge-gutter-mobile));
        }
    }

    pub(crate) c_vconsole_panel_closed {
        transform: "translateY(100%)";
        will-change: "auto";
    }

    pub(crate) c_vconsole_fab {
        position: "fixed";
        bottom: format!("calc({} + {})", var!(edge-gutter-bottom), var!(safe-area-inset-bottom));
        right: var!(edge-gutter);
        z-index: "9999";
        @media ((max-width: 767px)) {
            bottom: format!("calc({} + {})", var!(edge-gutter-mobile), var!(safe-area-inset-bottom));
            right: var!(edge-gutter-mobile);
        }
    }

    pub(crate) c_vconsole_header {
        display: "flex";
        justify-content: "space-between";
        align-items: "center";
        flex-shrink: "0";
    }

    pub(crate) c_vconsole_title {
        color: var!(foreground);
        font-size: var!(font-md);
        font-weight: "600";
        margin: "0px";
        letter-spacing: "0.03em";
        display: "flex";
        align-items: "center";
        gap: var!(space-sm);
    }

    pub(crate) c_vconsole_title_dot {
        width: "8px";
        height: "8px";
        background: var!(accent);
        display: "inline-block";
        animation: "euv-pulse 2s ease-in-out infinite";
    }

    pub(crate) c_vconsole_header_actions {
        display: "flex";
        gap: var!(space-sm);
        align-items: "center";
    }

    pub(crate) c_vconsole_clear_button {
        display: "inline-flex";
        justify-content: "center";
        align-items: "center";
        color: var!(foreground);
        padding: format!("{} {}", var!(space-2xs), var!(space-sm));
        font-size: var!(font-xs);
        font-weight: "600";
        cursor: "pointer";
        text-align: "center";
        border: format!("1.5px solid {}", var!(border));
        margin-left: "auto";
        :focus-visible {
            outline: "none";
        }
    }

    pub(crate) c_vconsole_close_button {
        display: "inline-flex";
        justify-content: "center";
        align-items: "center";
        color: var!(foreground);
        padding: format!("{} {}", var!(space-xs), var!(space-md));
        cursor: "pointer";
        font-size: var!(font-sm);
        font-weight: "400";
        text-align: "center";
        white-space: "nowrap";
        user-select: "none";
        -webkit-user-select: "none";
        vertical-align: "middle";
        outline: "none";
        transition: format!("all {} {}", var!(duration-fast), var!(ease-out));
        :hover {
            border-color: var!(foreground);
            color: var!(foreground);
            background: var!(background);
        }
        :focus-visible {
            outline: "none";
        }
        :active {
            background: "transparent";
            color: var!(foreground);
            border-color: var!(border);
        }
    }

    pub(crate) c_vconsole_body {
        flex: "1";
        overflow-y: "auto";
        contain: "content";
        padding-bottom: var!(space-md);
        font-family: "ui-monospace, monospace";
        font-size: var!(font-xs);
    }

    pub(crate) c_vconsole_log_item {
        display: "flex";
        align-items: "center";
        padding: format!("{} 0px", var!(space-sm));
        border-bottom: format!("1px dashed {}", var!(border));
        color: var!(foreground);
        font-size: var!(font-xs);
        word-break: "break-all";
    }

    pub(crate) c_vconsole_empty {
        color: var!(muted-foreground);
        font-size: var!(font-xs);
        text-align: "center";
        padding: format!("{} 0px", var!(space-4xl));
        overflow: "hidden";
    }

    pub(crate) c_vconsole_empty_hidden {
        height: "0";
        overflow: "hidden";
        padding: "0";
    }

    pub(crate) c_vconsole_log_list {
        overflow: "hidden";
    }

    pub(crate) c_vconsole_log_list_hidden {
        height: "0";
        overflow: "hidden";
    }

    pub(crate) c_vconsole_count {
        color: var!(muted-foreground);
        font-size: var!(font-sm);
        font-weight: "400";
    }

    pub(crate) c_vconsole_filter_bar {
        display: "flex";
        gap: var!(space-sm);
        padding: format!("{} 0px", var!(space-sm));
        border-bottom: format!("1px dashed {}", var!(border));
        flex-shrink: "0";
        align-items: "center";
    }

    pub(crate) c_vconsole_filter_badge {
        display: "inline-flex";
        justify-content: "center";
        align-items: "center";
        color: var!(text-on-accent);
        padding: format!("{} {}", var!(space-2xs), var!(space-sm));
        border: format!("1px solid {}", var!(accent));
        font-size: var!(font-xs);
        font-weight: "600";
        cursor: "pointer";
        text-align: "center";
        background: var!(accent);
        :focus-visible {
            outline: "none";
        }
    }

    pub(crate) c_vconsole_filter_badge_outline {
        display: "inline-flex";
        justify-content: "center";
        align-items: "center";
        color: var!(foreground);
        padding: format!("{} {}", var!(space-2xs), var!(space-sm));
        font-size: var!(font-xs);
        font-weight: "600";
        cursor: "pointer";
        text-align: "center";
        border: format!("1.5px solid {}", var!(border));
    }

    pub(crate) c_vconsole_level_badge {
        padding: format!("{} {}", var!(space-2xs), var!(space-sm));
        font-size: var!(font-xs);
        margin-right: var!(space-sm);
        letter-spacing: "0.05em";
        color: var!(foreground);
        border: "1px solid currentColor";
        wrap: "nowrap";
        flex-shrink: "0";
    }

    // ═══════════════════════════════════════════════════════════════════════════
    // euv_dropdown
    // ═══════════════════════════════════════════════════════════════════════════

    pub(crate) c_euv_dropdown {
        position: "relative";
    }

    pub(crate) c_euv_dropdown_menu {
        position: "absolute";
        // Sits flush under the trigger. The row is 36px tall and the container
        // gives it no padding, so `top: 36px` is the trigger's bottom edge —
        // any larger value opens a gap that reads as a break between the
        // button and its menu. This was hardcoded to 44px, which is why the
        // menu floated 8px below the button it belongs to.
        top: "44px";
        right: "0px";
        // `width: 100%` so the menu matches the dropdown container (and
        // therefore the trigger button) width exactly. With only `min-width`,
        // a trigger wider than 140px (e.g. the nav-column locale switcher
        // button) leaves a large empty gap on the left of the menu, since
        // `right: 0` anchors only the right edge to the container.
        width: "100%";
        background: var!(background);
        border: format!("1px solid {}", var!(border));
        box-shadow: var!(shadow-accent-lg);
        flex-direction: "column";
        z-index: "101";
    }

    pub(crate) c_euv_dropdown_menu_open {
        display: "flex";
    }

    pub(crate) c_euv_dropdown_menu_closed {
        display: "none";
    }

    pub(crate) c_euv_dropdown_item {
        // `control-row-pad` vertically, the same value the sidebar rows and the
        // CTA buttons use: 9 + 24 line + 9 + 3 left border = 42. The row is
        // only bordered on its left edge, so nothing stacks between neighbours
        // and the stack reads as one continuous column.
        //
        // It was `space-sm` (8px) for as long as the row wore a 1px border on
        // all four sides: 8 + 24 + 8 + 1 + 1 + 3 = 45 inside a 42px
        // border-box, so the browser gave back a fraction of the padding on
        // every row and the options came out with a hairline between them.
        // Dropping the stacked borders makes 9px the right number again.
        padding: format!("{} {}", var!(control-row-pad), var!(space-lg));
        font-size: var!(font-sm);
        text-align: "left";
        cursor: "pointer";
        // Rows must agree on height or the hover bar never lines up with the
        // active fill. `line-height: normal` is at the mercy of the glyphs:
        // English and Korean settle on a 35px row while Japanese takes 38px,
        // and the language switcher lists all three at once. Pinning the line
        // height is what makes the stack even, so the left bar can span a row
        // that matches the active background exactly. 24px is the tallest
        // of the three natural line heights *and* the body line height, so no
        // script is clipped and the row matches the sidebar and the buttons.
        line-height: "24px";
        text-box-trim: "none";
        text-box-edge: "none";
        // Hover signals through the left edge only — no background wash. The
        // menu sits over page content, so tinting the whole row made an
        // unselected option read as a highlighted page link and washed out
        // the label underneath it. The left border carries the affordance
        // without painting behind the text or boxing the row.
        //
        // Only the LEFT edge is bordered — 3px, transparent until hover, so
        // the hover bar needs no width change and the label never shifts.
        //
        // This used to be `border: 1px solid transparent` plus
        // `border-left-width: 3px`, i.e. a box on all four sides. In a stack
        // of rows every horizontal edge is shared between two neighbours, so
        // the transparent top and bottom of one row sat against those of the
        // next. Nothing is visible at rest, but each row then had to fit 8px +
        // 24px line + 8px + 1px + 1px + 3px = 45px of content into a 42px
        // border-box, and the browser reclaimed the overflow by trimming the
        // padding — leaving a hairline between every pair of options. Only the
        // left edge remains, so nothing stacks and 9 + 24 + 9 + 3 = 42 lands
        // exactly.
        border-left: "3px solid transparent";
        :hover {
            // Only the left edge reacts. The previous rule lit the whole
            // perimeter, which framed the option as a card floating over the
            // menu; the locale list is a plain vertical stack, so a box on
            // every side read as a selection rather than a pointer position.
            // The reserved left border carries the affordance on its own.
            border-left-color: var!(foreground);
        }
    }

    pub(crate) c_euv_dropdown_item_active {
        // Same vertical padding as `c_euv_dropdown_item` (`control-row-pad`) —
        // the accent fill has to be exactly as tall as the row it replaces.
        padding: format!("{} {}", var!(control-row-pad), var!(space-lg));
        font-size: var!(font-sm);
        text-align: "left";
        cursor: "pointer";
        font-weight: "600";
        // The same pinned line height as `c_euv_dropdown_item`, for the same
        // reason: a hovered row's bar has to match this fill to the pixel.
        line-height: "24px";
        // Only the left edge, for the same reason as `c_euv_dropdown_item`:
        // a border on all four sides stacks between neighbouring rows. The
        // accent fill spans the full box either way, and reserving the same
        // 3px left edge keeps a hovered row's bar and an active row's fill
        // aligned edge for edge and at the same width.
        border-left: "3px solid transparent";
        // The selected item wears the accent fill and the text colour that
        // reads on top of it, the same pairing the sidebar's `_active` link
        // uses. The inset bar is dropped: the full-width fill already carries
        // the current-page signal, and a bar in the same monochrome accent
        // would be invisible against it.
        background: var!(accent);
        color: var!(text-on-accent);
        :hover {
            background: var!(accent);
            color: var!(text-on-accent);
            box-shadow: "none";
        }
    }

    // ═══════════════════════════════════════════════════════════════════════════
    // File Upload
    // ═══════════════════════════════════════════════════════════════════════════

    pub c_file_upload_input_hidden {
        position: "absolute";
        width: "1px";
        height: "1px";
        padding: "0px";
        margin: "-1px";
        overflow: "hidden";
        clip: "rect(0, 0, 0, 0)";
        white-space: "nowrap";
        border: "0px";
    }

    pub c_file_upload_options {
        margin: format!("{} 0px", var!(gap-component));
    }

    pub c_file_upload_item {
        display: "flex";
        align-items: "center";
        gap: format!("{}", var!(space-md));
        margin: format!("{} 0px", var!(space-sm));
        font-size: var!(font-base);
        color: "inherit";
    }

    pub c_file_upload_item_index {
        font-size: var!(font-sm);
        font-weight: "600";
        color: var!(accent);
        min-width: "24px";
    }

    pub c_file_upload_item_name {
        color: "inherit";
        word-break: "break-all";
    }

    // ═══════════════════════════════════════════════════════════════════════════
    // euv_drawer
    // ═══════════════════════════════════════════════════════════════════════════

    pub(crate) c_euv_drawer_overlay {
        position: "fixed";
        top: "0px";
        left: "0px";
        right: "0px";
        bottom: "0px";
        background: var!(bg-overlay);
        z-index: "200";
        transition: format!("opacity {} {}, visibility {} {}", var!(duration-overlay), var!(ease-out), var!(duration-overlay), var!(ease-out));
    }

    pub(crate) c_euv_drawer_overlay_open {
        opacity: "1";
        visibility: "visible";
    }

    pub(crate) c_euv_drawer_overlay_closed {
        opacity: "0";
        visibility: "hidden";
    }

    pub(crate) c_euv_drawer {
        position: "fixed";
        top: "0px";
        left: "0px";
        bottom: "0px";
        width: "260px";
        background: var!(background);
        border-right: format!("1px solid {}", var!(border));
        z-index: "201";
        overflow-y: "auto";
        padding: var!(space-xl);
        transition: format!("transform {} {}, visibility {} {}", var!(duration-normal), var!(ease-out), var!(duration-normal), var!(ease-out));
    }

    pub(crate) c_euv_drawer_open {
        transform: "translateX(0px)";
        visibility: "visible";
    }

    pub(crate) c_euv_drawer_closed {
        transform: "translateX(-100%)";
        visibility: "hidden";
    }
}