/* Team help layer (team-help.js). Own tokens, so it looks the same in every app. Dark only (house rule). Transform/opacity motion only. */
.th-root {
    --th-bg: rgba(14, 16, 20, 0.92); --th-line: rgba(255, 255, 255, 0.09); --th-text: #e8eaee; --th-dim: #a3a9b5; --th-acc: #e3a92b; --th-acc-2: #ffd978;
    --th-ease: cubic-bezier(.2, .8, .2, 1); --th-font: 'Inter', 'Segoe UI', system-ui, sans-serif;
    position: fixed; inset: auto auto 12px 12px; z-index: 2147482000; font: 13px/1.45 var(--th-font); color: var(--th-text); pointer-events: none;
}
.th-root * { box-sizing: border-box; }
.th-root button { font: inherit; color: inherit; }

.th-pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: 14px;
    border: 1px solid var(--th-line); background: rgba(14, 16, 20, 0.62); backdrop-filter: blur(10px); cursor: pointer; opacity: 0.55;
    transition: opacity 160ms var(--th-ease), transform 160ms var(--th-ease), border-color 160ms; }
.th-pill:hover, .th-pill:focus-visible, .th-pill.is-open { opacity: 1; border-color: rgba(227, 169, 43, 0.5); }
.th-pill:active { transform: scale(0.96); }
.th-q { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--th-acc); color: #17120a; font-weight: 800; font-size: 11px; }
.th-pill-txt { font-weight: 600; letter-spacing: 0.02em; }
.th-pill kbd, .th-k kbd { font: 600 11px/1 var(--th-font); padding: 3px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--th-line); color: var(--th-dim); }

.th-panel { pointer-events: auto; position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(380px, calc(100vw - 24px)); display: flex; flex-direction: column;
    background: var(--th-bg); border: 1px solid var(--th-line); border-radius: 12px; backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04); overflow: hidden; }
.th-panel[hidden] { display: none !important; }     /* the display:flex above would otherwise beat the hidden attribute and leave an empty box over the app */
.th-panel.is-in { animation: th-in 260ms var(--th-ease) backwards; }
.th-panel.is-out { animation: th-out 170ms ease-in forwards; }
@keyframes th-in { from { opacity: 0; transform: translateX(18px) scale(0.985); } }
@keyframes th-out { to { opacity: 0; transform: translateX(14px); } }
.th-panel::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--th-acc), transparent); opacity: 0.7; }

.th-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 16px 8px; }
.th-title small { display: block; color: var(--th-acc); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; }
.th-title b { font-size: 17px; letter-spacing: 0.01em; }
.th-x { width: 28px; height: 28px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 18px; color: var(--th-dim); }
.th-x:hover { border-color: var(--th-line); color: var(--th-text); }

.th-top { padding: 0 16px 10px; }
.th-me { display: flex; align-items: center; gap: 10px; }
.th-av { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--th-line); object-fit: cover; }
.th-me-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.th-me-name { font-weight: 650; }
.th-me-rank { color: var(--th-dim); font-size: 12px; }
.th-xp { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 3px; }
.th-xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--th-acc), var(--th-acc-2)); transform-origin: left; transition: transform 600ms var(--th-ease); }

.th-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--th-line); }
.th-tab { position: relative; padding: 9px 10px; border: 0; background: none; cursor: pointer; color: var(--th-dim); font-weight: 600; }
.th-tab.is-on { color: var(--th-text); }
.th-tab.is-on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--th-acc); border-radius: 2px; animation: th-bar 220ms var(--th-ease) backwards; }
@keyframes th-bar { from { transform: scaleX(0.2); opacity: 0; } }

.th-body { flex: 1; overflow: auto; padding: 14px 16px 18px; scrollbar-width: thin; }
.th-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.th-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; animation: th-step 300ms var(--th-ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes th-step { from { opacity: 0; transform: translateY(6px); } }
.th-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(227, 169, 43, 0.45); color: var(--th-acc); font-weight: 700; font-size: 11.5px; }
.th-h { margin: 14px 0 6px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--th-acc); font-weight: 700; }
.th-h:first-child { margin-top: 0; }
.th-keys { display: grid; gap: 1px; border-radius: 8px; overflow: hidden; border: 1px solid var(--th-line); }
.th-row { display: grid; grid-template-columns: minmax(118px, 46%) 1fr; gap: 10px; padding: 6px 10px; background: rgba(255, 255, 255, 0.025); }
.th-row:nth-child(2n) { background: rgba(255, 255, 255, 0.045); }
.th-k { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.th-k i { font-style: normal; color: var(--th-dim); font-size: 11px; }
.th-a { color: var(--th-text); }
.th-note { margin: 14px 0 0; color: var(--th-dim); font-size: 12.5px; }
.th-warn { color: var(--th-acc-2); }
.th-link { display: inline-block; margin-top: 12px; color: var(--th-acc); text-decoration: none; font-weight: 600; }
.th-link:hover { text-decoration: underline; }

.th-coach { pointer-events: auto; position: absolute; left: 0; bottom: 38px; width: min(320px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 12px;
    background: var(--th-bg); border: 1px solid var(--th-line); backdrop-filter: blur(16px); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
    animation: th-coach 320ms var(--th-ease) backwards; animation-delay: 60ms; }
.th-coach.is-out { animation: th-out 170ms ease-in forwards; }
@keyframes th-coach { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.th-coach-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.th-coach-head span { color: var(--th-dim); font-size: 12px; }
.th-steps--mini { gap: 8px; font-size: 12.5px; }
.th-coach-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.th-btn { height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(227, 169, 43, 0.6); background: var(--th-acc); color: #17120a !important; font-weight: 700; cursor: pointer; }
.th-btn--ghost { background: transparent; color: var(--th-text) !important; border-color: var(--th-line); font-weight: 600; }
.th-btn:hover { filter: brightness(1.08); }

/* Level up in any app: a small side card, top right, no overlay, no focus change. */
.th-lvl { pointer-events: auto; position: fixed; top: 16px; right: 16px; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; min-width: 220px;
    border-radius: 12px; background: var(--th-bg); border: 1px solid rgba(227, 169, 43, 0.35); backdrop-filter: blur(16px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(227, 169, 43, 0.08); overflow: hidden; animation: th-lvl-in 380ms var(--th-ease) backwards; }
.th-lvl::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 217, 120, 0.16) 50%, transparent 65%);
    transform: translateX(-100%); animation: th-sheen 1100ms 260ms var(--th-ease) forwards; pointer-events: none; }
.th-lvl.is-out { animation: th-out 200ms ease-in forwards; }
@keyframes th-lvl-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes th-sheen { to { transform: translateX(100%); } }
.th-lvl-ring { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; border: 1px solid rgba(227, 169, 43, 0.6);
    background: radial-gradient(circle at 35% 30%, rgba(227, 169, 43, 0.28), rgba(227, 169, 43, 0.08)); box-shadow: 0 0 18px rgba(227, 169, 43, 0.25); }
.th-lvl-ring b { font-size: 16px; color: var(--th-acc-2); font-variant-numeric: tabular-nums; }
.th-lvl-txt { display: grid; line-height: 1.25; }
.th-lvl-txt small { color: var(--th-acc); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; }
.th-lvl-txt strong { font-size: 14px; }
.th-lvl-txt em { font-style: normal; color: var(--th-dim); font-size: 12px; }
.th-lvl-txt .th-xp { width: 190px; margin-top: 6px; }
.th-lvl-txt .th-xp i { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
    .th-lvl { animation: th-fade 200ms ease-out backwards; } .th-lvl::after { display: none; }
    .th-panel.is-in, .th-coach, .th-steps li, .th-tab.is-on::after { animation: th-fade 200ms ease-out backwards; animation-delay: 0ms; }
    @keyframes th-fade { from { opacity: 0; } }
}
@media print { .th-root { display: none; } }