/* /docs/tray-menu/: replica of the TranslucentTB tray flyout (2026.2) */
.tm { margin: 1.4rem 0 2rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; }
.tm-ctl { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.tm-opt { display: flex; flex-direction: column; gap: 6px; }
.tm-opt .lbl { margin: 0; }
.tm-stage { position: relative; padding: 26px 18px 30px; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; background: #1b2238; isolation: isolate; overflow: hidden; }
.tm-stage::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; left: -90px; top: 40px; background: #f08a4b; z-index: -1; }
.tm-stage::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; right: -60px; top: -80px; background: #4cc7b0; z-index: -1; }
.tm-menu { width: 100%; padding: 4px; border-radius: 8px; background: rgba(44, 44, 48, .86); backdrop-filter: blur(30px) saturate(1.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .55); color: #f2f2f4; font: 400 13.5px/1.2 "Segoe UI Variable", "Segoe UI", var(--sans); }
.tm-menu ul { list-style: none; margin: 0; padding: 0; }
.tm-menu li { margin: 0; }
.tm-i { position: relative; display: grid; grid-template-columns: 22px 20px 1fr auto; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 6px; border-radius: 4px; }
.tm-i.is-hl { background: rgba(255, 255, 255, .08); }
.tm-i .ck { font-size: 12px; text-align: center; color: #9ab8ff; }
.tm-i .ic { width: 5px; height: 5px; justify-self: center; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.tm-i .ic.none { background: none; }
.tm-i .ar { font-size: 11px; opacity: .75; }
.tm-i .kb { font: 500 11px/1 var(--sans); opacity: .6; }
.tm-i.is-off { opacity: .4; }
.tm-sep { height: 1px; margin: 4px 6px; background: rgba(255, 255, 255, .12); }
.tm-cap { margin: 2px 0 8px; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.tm-col { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; max-width: 320px; }
.tm [data-when] { display: none; }
.tm[data-tb="classic"] [data-when~="classic"], .tm[data-tb="xaml"] [data-when~="xaml"], .tm[data-tb="mixed"] [data-when~="mixed"] { display: grid; }
.tm[data-battery="yes"] [data-when~="battery"], .tm[data-pkg="yes"] [data-when~="pkg"] { display: grid; }
.tm[data-battery="yes"] .tm-sep[data-when~="battery"], .tm[data-pkg="yes"] .tm-sep[data-when~="pkg"] { display: block; }
.tm[data-blur="no"] [data-blur-item] { display: none; }
.tm-note { padding: 10px 16px 12px; margin: 0; font-size: 13.5px; color: var(--ink-3); border-top: 1px solid var(--line); }
@media (max-width: 640px) { .tm-col { max-width: none; } }