/* ============================================================
   LM Hotel Restaurant Reservation — Component Styles
   Complements app.css — imported after it in index.html
   ============================================================ */

/* ── 1. Skeleton Shimmer Animation ─────────────────────────── */

@keyframes skeleton-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

/* Base shimmer element */
.skeleton-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-bg-card, rgba(255,255,255,0.04))   0%,
        rgba(193, 165, 90, 0.08)                        40%,
        var(--color-bg-card, rgba(255,255,255,0.04))   100%
    );
    background-size: 600px 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: var(--radius-xs, 4px);
}

/* ── Stat Skeleton ───────────────────────────────────────────── */

.skeleton-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-6, 1.5rem);
    margin-bottom: var(--space-8, 2rem);
}

.skeleton-stat-card {
    position: relative;
    background: var(--color-bg-card, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(201,165,90,0.15));
    border-radius: var(--radius-lg, 20px);
    padding: var(--space-6, 1.5rem);
    overflow: hidden;
    min-height: 130px;
}

/* Mimic the gold top-line of .stat-card */
.skeleton-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(193,165,90,0.3), transparent);
}

/* Override shimmer for stat card children — they sit on the card bg */
.skeleton-stat-card .skeleton-shimmer {
    display: block;
}

.skeleton-stat-number {
    width: 50%;
    height: 2.6rem;
    margin-bottom: var(--space-3, 0.75rem);
    border-radius: var(--radius-sm, 8px);
}

.skeleton-stat-label {
    width: 70%;
    height: 0.75rem;
    border-radius: var(--radius-xs, 4px);
}

.skeleton-stat-icon-placeholder {
    position: absolute;
    top: var(--space-4, 1rem);
    right: var(--space-4, 1rem);
    width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--radius-sm, 8px);
    background: rgba(193,165,90,0.06);
}

/* ── Table Skeleton ─────────────────────────────────────────── */

.skeleton-table-wrapper {
    border: 1px solid var(--color-border, rgba(201,165,90,0.15));
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
}

.skeleton-table-header {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--color-border, rgba(201,165,90,0.15));
}

.skeleton-th {
    height: 0.7rem;
    flex: 1;
    border-radius: var(--radius-xs, 4px);
}

.skeleton-th--wide   { flex: 2; }
.skeleton-th--narrow { flex: 0.7; }

.skeleton-table-row {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.skeleton-table-row:last-child {
    border-bottom: none;
}

.skeleton-td {
    height: 0.9rem;
    flex: 1;
    border-radius: var(--radius-xs, 4px);
}

.skeleton-td--wide   { flex: 2; }
.skeleton-td--narrow { flex: 0.7; }

.skeleton-badge {
    display: inline-block;
    width: 72px;
    height: 1.4rem;
    border-radius: var(--radius-full, 9999px);
    background: rgba(193,165,90,0.08);
}

.skeleton-actions {
    height: 1.6rem;
    border-radius: var(--radius-sm, 8px);
}

/* ── Card Skeleton ──────────────────────────────────────────── */

.skeleton-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6, 1.5rem);
}

.skeleton-card {
    background: var(--color-bg-card, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(201,165,90,0.15));
    border-radius: var(--radius-lg, 20px);
    overflow: hidden;
}

.skeleton-card-img {
    width: 100%;
    height: 180px;
    border-radius: 0;
}

.skeleton-card-body {
    padding: var(--space-5, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.skeleton-text {
    display: block;
    height: 0.9rem;
    border-radius: var(--radius-xs, 4px);
}

.skeleton-text--title { height: 1.15rem; width: 75%; }
.skeleton-text--sub   { height: 0.8rem;  width: 55%; }
.skeleton-text--sm    { height: 0.75rem; width: 90%; }
.skeleton-text--short { width: 60%; }

.skeleton-card-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-2, 0.5rem);
}

.skeleton-badge-inline {
    display: inline-block;
    width: 72px;
    height: 1.4rem;
    border-radius: var(--radius-full, 9999px);
}

.skeleton-btn {
    width: 88px;
    height: 2rem;
    border-radius: var(--radius-sm, 8px);
}

/* ── List Skeleton ──────────────────────────────────────────── */

.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    padding: var(--space-4, 1rem);
    background: var(--color-bg-card, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(201,165,90,0.15));
    border-radius: var(--radius-sm, 8px);
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full, 9999px);
    flex-shrink: 0;
}

.skeleton-list-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.skeleton-badge-trail {
    width: 60px;
    height: 1.4rem;
    border-radius: var(--radius-full, 9999px);
    flex-shrink: 0;
}

/* ── 2. Toast Notifications ────────────────────────────────────
   NOTE: Base .toast-container / .toast / .toast-success /
   .toast-error / .toast-info are defined in app.css §33.
   This block adds the missing variants and enter/exit animations.
   ──────────────────────────────────────────────────────────── */

@keyframes toast-enter {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-exit {
    from {
        opacity: 1;
        transform: translateX(0);
        max-height: 200px;
        margin-bottom: var(--space-3, 0.75rem);
    }
    to {
        opacity: 0;
        transform: translateX(40px);
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Override the default fadeInUp entry with a slide-in from right */
.toast {
    animation: toast-enter 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.toast.toast-exit {
    animation: toast-exit 0.25s ease-in forwards;
    pointer-events: none;
}

/* Warning variant (not in app.css) */
.toast-warning {
    border-left: 3px solid var(--color-warning, hsl(38,90%,55%));
}

/* Icon area inside toasts */
.toast-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
}

.toast-body {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text, hsl(0,0%,95%));
    margin-bottom: 2px;
}

.toast-message {
    font-size: 0.82rem;
    color: var(--color-text-muted, hsl(0,0%,62%));
}

.toast-close {
    background: transparent;
    border: none;
    color: var(--color-text-faint, hsl(0,0%,40%));
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-xs, 4px);
    font-size: 0.9rem;
    line-height: 1;
    transition: color 0.15s ease;
    flex-shrink: 0;
    align-self: flex-start;
}

.toast-close:hover {
    color: var(--color-text, hsl(0,0%,95%));
}

/* Mobile: full-width toasts */
@media (max-width: 480px) {
    .toast-container {
        top: auto;
        bottom: var(--space-4, 1rem);
        right: var(--space-4, 1rem);
        left: var(--space-4, 1rem);
    }

    .toast {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }
}

/* ── 3. Light / Dark Mode Theme Toggle ─────────────────────── */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.theme-toggle button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm, 8px);
    background: var(--color-bg-card, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(201,165,90,0.15));
    color: var(--color-text-muted, hsl(0,0%,62%));
    cursor: pointer;
    transition: var(--transition-fast, all 0.15s ease-in-out);
    font-size: 1rem;
    line-height: 1;
}

.theme-toggle button:hover {
    background: var(--color-bg-card-hover, rgba(255,255,255,0.07));
    border-color: var(--color-border-strong, rgba(201,165,90,0.30));
    color: var(--color-accent, hsl(38,45%,56%));
    transform: rotate(12deg);
}

.theme-toggle button:focus-visible {
    outline: 2px solid var(--color-accent, #c1a55a);
    outline-offset: 2px;
}

/* ── 4. Print Styles ────────────────────────────────────────── */

@media print {
    .sidebar,
    .topbar,
    .no-print {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .print-only {
        display: block !important;
    }

    /* Reset card elevation — ink-friendly flat rendering */
    .card,
    .stat-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        backdrop-filter: none !important;
    }

    /* Ensure text prints dark regardless of CSS variables */
    body {
        background: #fff !important;
        color: #111 !important;
    }

    a {
        color: #111 !important;
        text-decoration: underline;
    }

    /* Show print-only heading with reservation code */
    .print-header {
        display: block;
        text-align: center;
        margin-bottom: 1rem;
        font-size: 1.2rem;
        font-weight: 700;
    }
}

.print-only {
    display: none;
}

/* ── 5. Empty State ─────────────────────────────────────────────
   NOTE: Base .empty-state block is defined in app.css §34.
   This section extends it with a CTA button and centered layout.
   ──────────────────────────────────────────────────────────── */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

/* Gold ring decorative border around icon */
.empty-state-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--color-border, rgba(201,165,90,0.15));
    background: var(--color-accent-subtle, rgba(201,165,90,0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin-bottom: var(--space-4, 1rem);
}

/* ── 6. Mobile Tap Targets ──────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {
    /* Ensure interactive elements meet the 44 x 44 px minimum */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 40px;
        padding: 0.55rem 1rem;
    }

    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .nav-item {
        min-height: 44px;
    }

    .page-btn {
        width: 44px;
        height: 44px;
    }

    /* Larger form controls on touch */
    .form-control {
        min-height: 44px;
    }

    /* Bigger close buttons in modals/toasts */
    .modal-close,
    .toast-close {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── 7. Skip-to-Content Link (Accessibility) ────────────────── */

.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -1;
    white-space: nowrap;

    /* Styled but invisible until focused */
    background: var(--color-accent, #c1a55a);
    color: hsl(225, 33%, 8%);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm, 8px);
    text-decoration: none;
}

.skip-link:focus {
    left: var(--space-4, 1rem);
    top: var(--space-4, 1rem);
    width: auto;
    height: auto;
    overflow: visible;
    z-index: 9999;
    outline: 2px solid hsl(225, 33%, 8%);
    outline-offset: 2px;
}

/* ── 8. Auth Loading Guard ──────────────────────────────────── */

.auth-guard-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-bg, #0f1117);
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

.auth-guard-loading .loading-logo {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(
        135deg,
        var(--color-accent, #c1a55a),
        var(--color-accent-light, hsl(38,55%,68%))
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-guard-loading .loading-subtitle {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-faint, hsl(0,0%,40%));
}

/* ============================================================
   Maitre D' Service Timeline (Phase 1)
   High-contrast flat design — optimized for iPad use on a busy shift.
   ============================================================ */
.tl-live {
    margin-left: 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}
.tl-live-on  { color: var(--color-success, #34a853); }
.tl-live-off { color: var(--color-text-faint, #666); }

.tl-counts { display: flex; gap: 1.25rem; font-size: 0.85rem; color: var(--color-text-muted, #9aa); }
.tl-counts strong { color: var(--color-text, #fff); font-size: 1.05rem; }

.tl-timeline { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }

.tl-card {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md, 12px);
    background: var(--color-bg-elevated, #16181f);
    border-left: 5px solid var(--color-neutral, #888);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.2));
}

/* Status accents (left border + time color) */
.tl-status-confirmed { border-left-color: var(--color-info, #2196f3); }
.tl-status-arrived   { border-left-color: var(--color-warning, #ffa000); }
.tl-status-seated    { border-left-color: var(--color-success, #34a853); }
.tl-status-completed { border-left-color: var(--color-neutral, #888); opacity: 0.55; }
.tl-status-noshow    { border-left-color: var(--color-error, #dc3535); opacity: 0.6; }

.tl-card-time {
    font-family: var(--font-heading, Georgia, serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text, #fff);
    text-align: center;
}

.tl-card-body { min-width: 0; }
.tl-card-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.tl-card-name { font-size: 1.05rem; font-weight: 600; color: var(--color-text, #fff); }
.tl-card-meta {
    display: flex; gap: 1rem; flex-wrap: wrap;
    margin-top: 0.25rem; font-size: 0.85rem; color: var(--color-text-muted, #9aa);
}
.tl-card-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.tl-tag {
    font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full, 9999px);
}
.tl-tag-vip     { background: rgba(201,165,90,0.18); color: var(--color-accent-light, #d9be84); }
.tl-tag-allergy { background: rgba(220,53,53,0.18);  color: #ff8a8a; }
.tl-tag-event   { background: rgba(33,150,243,0.18); color: #8ec5ff; }
.tl-tag-access  { background: rgba(52,168,83,0.18);  color: #8be0a4; }

.tl-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.tl-action {
    min-height: 48px;        /* touch-friendly target */
    min-width: 84px;
    padding: 0 1.1rem;
    border-radius: var(--radius-sm, 8px);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition-fast, all 0.15s ease-in-out);
}
.tl-action:disabled { opacity: 0.5; cursor: not-allowed; }
.tl-action-primary {
    background: var(--color-accent, #c1a55a);
    color: #1a1505;
}
.tl-action-primary:hover:not(:disabled) { background: var(--color-accent-hover, #d2b974); }
.tl-action-ghost {
    background: transparent;
    color: var(--color-text-muted, #9aa);
    border-color: var(--color-border, rgba(201,165,90,0.25));
}
.tl-action-ghost:hover:not(:disabled) { color: var(--color-text, #fff); border-color: var(--color-border-strong, rgba(201,165,90,0.4)); }

/* Live-update highlight */
.tl-card-updated { animation: tl-flash 0.6s ease-in-out; }
@keyframes tl-flash {
    0%   { background: var(--color-accent-subtle, rgba(201,165,90,0.12)); }
    100% { background: var(--color-bg-elevated, #16181f); }
}

.tl-empty { text-align: center; padding: 3rem 1rem; color: var(--color-text-muted, #9aa); }
.tl-empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }

/* Status badges for the new states */
.badge-arrived { background: var(--color-warning-bg, rgba(255,165,0,0.12)); color: var(--color-warning, #ffa000); }
.badge-seated  { background: var(--color-success-bg, rgba(52,168,83,0.12)); color: var(--color-success, #34a853); }

/* Mobile / tablet: stack the card so actions stay reachable */
@media (max-width: 640px) {
    .tl-card { grid-template-columns: 60px 1fr; }
    .tl-card-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .tl-card-updated { animation: none; }
}

/* ============================================================
   Quick Preferences chips (Guest booking — Phase 2)
   ============================================================ */
.qp-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.qp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;                 /* touch-friendly */
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg-card, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(201,165,90,0.18));
    color: var(--color-text, #fff);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease-in-out;   /* micro-animation */
}
.qp-chip:hover {
    border-color: var(--color-border-strong, rgba(201,165,90,0.35));
    transform: translateY(-1px);
}
.qp-chip.active {
    background: var(--color-accent, #c1a55a);
    border-color: var(--color-accent, #c1a55a);
    color: #1a1505;
    font-weight: 700;
}
.qp-chip-icon { font-size: 1rem; line-height: 1; }

/* Micro-animations for booking inputs/buttons */
.form-control,
.chip,
.btn {
    transition: all 0.25s ease-in-out;
}
.form-control:focus {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .qp-chip, .qp-chip:hover,
    .form-control, .form-control:focus,
    .chip, .btn { transition: none; transform: none; }
}

/* ============================================================
   Digital QR Menu (Phase 3) — public visual menu
   ============================================================ */
.menu-page { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.menu-hero { margin-bottom: 1.5rem; }

/* Sticky category + meal-period nav */
.menu-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-bg, #0f1117);
    border-bottom: 1px solid var(--color-divider, rgba(255,255,255,0.06));
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
}
.menu-mealfilter { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.menu-pill {
    min-height: 40px;
    padding: 0.35rem 1rem;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--color-border, rgba(201,165,90,0.18));
    background: transparent;
    color: var(--color-text-muted, #9aa);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.menu-pill.active {
    background: var(--color-accent, #c1a55a);
    border-color: var(--color-accent, #c1a55a);
    color: #1a1505;
}
.menu-catnav { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.25rem; }
.menu-catlink {
    white-space: nowrap;
    color: var(--color-text-muted, #9aa);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid transparent;
}
.menu-catlink:hover { color: var(--color-accent-light, #d9be84); border-bottom-color: var(--color-accent, #c1a55a); }

.menu-section { scroll-margin-top: 130px; margin-bottom: 2.5rem; }
.menu-section-title {
    font-family: var(--font-heading, Georgia, serif);
    font-size: 1.5rem;
    color: var(--color-text, #fff);
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-divider, rgba(255,255,255,0.06));
}

/* Responsive gallery grid */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}
.menu-item {
    background: var(--color-bg-card, rgba(255,255,255,0.04));
    border: 1px solid var(--color-border, rgba(201,165,90,0.15));
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    transition: transform 0.25s ease-in-out, border-color 0.25s ease-in-out;
}
.menu-item:hover { transform: translateY(-3px); border-color: var(--color-border-strong, rgba(201,165,90,0.3)); }
.menu-item-photo { aspect-ratio: 16 / 10; background: var(--color-bg-elevated, #16181f); overflow: hidden; }
.menu-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-item-photo-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; opacity: 0.4;
    background: linear-gradient(135deg, var(--color-bg-elevated,#16181f), var(--color-bg,#0f1117));
}
.menu-item-info { padding: 0.9rem 1rem 1.1rem; }
.menu-item-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.menu-item-title { font-size: 1.05rem; font-weight: 600; color: var(--color-text, #fff); margin: 0; }
.menu-diet { display: flex; gap: 0.25rem; flex-shrink: 0; }
.menu-diet-badge { font-size: 1rem; line-height: 1.4; }
.menu-item-desc { margin-top: 0.4rem; font-size: 0.88rem; color: var(--color-text-muted, #9aa); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
    .menu-item, .menu-item:hover, .menu-pill { transition: none; transform: none; }
}