/* ============ Touch gear bottom sheet ============ */ /* Permanent -level dialog created by js/tooltips.js. Only ever shown on (hover:none) touch devices, where tapping a .gear-item opens it instead of a hover tooltip. Reuses the .tt-gear card markup that buildGearHtml() produces so the content matches the desktop tooltip byte-for-byte. */ .gear-sheet { position: fixed; inset: 0; z-index: 220; /* above the lightbox (200) and header (30) */ } .gear-sheet.hidden { display: none !important; } .gear-sheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.24s var(--ease); } .gear-sheet--open .gear-sheet__backdrop { opacity: 1; } .gear-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #1b1c36, #121326); border-top: 1px solid var(--border-strong); border-radius: 16px 16px 0 0; box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.8); padding: 0.5rem 0 max(0.75rem, env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.26s var(--ease); } .gear-sheet--open .gear-sheet__panel { transform: translateY(0); } /* Drag grip affordance. */ .gear-sheet__grip { width: 40px; height: 4px; margin: 0.35rem auto 0.25rem; border-radius: 999px; background: var(--border-strong); flex-shrink: 0; } .gear-sheet__close { position: absolute; top: 0.5rem; right: 0.6rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: 50%; color: var(--text); cursor: pointer; padding: 0; } .gear-sheet__close:hover, .gear-sheet__close:focus-visible { border-color: var(--gold); color: var(--gold-bright); outline: none; } .gear-sheet__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gear-sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.5rem 1rem 0.25rem; } /* The injected .tt-gear card spans the full sheet width and drops its own shadow/border (the panel already provides the surface). */ .gear-sheet__body .tt-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; } .gear-sheet__body .tt-gear { width: 100%; } /* Eorzea DB link rendered as an explicit full-width button on touch — a first tap previews the sheet, this second tap follows the link. ≥44px tall. */ .tt-gear__dblink { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0.6rem 0.9rem 0.2rem; padding: 0.6rem 1rem; border: 1px solid var(--border-strong); border-radius: 6px; background: linear-gradient( 180deg, rgba(200, 170, 110, 0.1), rgba(200, 170, 110, 0.02) ); color: var(--gold-bright); font-size: 0.9rem; letter-spacing: 0.04em; } .tt-gear__dblink:hover, .tt-gear__dblink:focus-visible { border-color: var(--gold); text-decoration: none; outline: none; } @media (prefers-reduced-motion: reduce) { .gear-sheet__backdrop, .gear-sheet__panel { transition: none !important; } }