#detail-dialog{width:calc(100vw - 24px);max-width:none;height:calc(100dvh - 32px);max-height:calc(100dvh - 32px);padding:0;border:0;background:transparent;box-shadow:none;overflow:visible}#detail-dialog[open]{display:grid;grid-template-columns:24px minmax(0,1fr) 24px;gap:clamp(12px,1.6vw,24px);align-items:stretch}.detail-card{grid-column:2;grid-row:1;min-width:0;height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;border:1px solid #3b3d43;border-radius:22px;background:#1b1c1f;box-shadow:0 18px 65px #0008;touch-action:pan-y pinch-zoom}.detail-card::-webkit-scrollbar{display:none}.detail-card-dragging{transform:translate3d(var(--card-drag-x,0px),var(--card-drag-y,0px),0);transition:none;will-change:transform;user-select:none}.detail-card-returning{transform:translateZ(0);transition:transform .17s ease-out}.detail-heading{flex:1}.has-detail-neighbors .detail-card{padding-bottom:66px}.detail-navigation{position:absolute;z-index:3;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:22px;padding:0 8px;border-radius:28px;background:#1b1c1fd9;box-shadow:0 5px 22px #0003}#detail-dialog:not(.has-detail-neighbors) .detail-navigation{display:none}.detail-nav-arrow{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--brand-gold)}.detail-nav-arrow svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.detail-nav-arrow:hover{background:color-mix(in srgb,var(--brand-gold) 6%,transparent);color:var(--brand-gold-high)}.detail-nav-arrow:focus-visible,.detail-peek:focus-visible{outline:2px solid var(--brand-gold-high);outline-offset:-3px}.detail-peek{grid-row:1;align-self:stretch;position:relative;overflow:hidden;width:24px;padding:0;border:1px solid #4b4439;border-radius:18px;color:var(--brand-gold);background:#222225;opacity:.8}#detail-peek-previous{grid-column:1;border-radius:0 18px 18px 0}#detail-peek-next{grid-column:3;border-radius:18px 0 0 18px}.detail-peek-sheet{position:absolute;top:0;bottom:0;width:300px;background:linear-gradient(120deg,#c69c5710,transparent 44%),#202124;padding:27px;text-align:left;pointer-events:none}#detail-peek-previous .detail-peek-sheet{right:0}#detail-peek-next .detail-peek-sheet{left:0}.detail-peek-code{display:block;font-size:24px;margin-bottom:14px}.detail-peek-species{color:#b6b5b3;font-size:13px;text-transform:capitalize}.detail-peek-lines{display:block;border-top:1px solid #494641;margin-top:30px;height:45%;background:linear-gradient(155deg,#a18c6320,transparent);border-radius:14px}#detail-dialog [hidden]{display:none!important}@media(max-width:600px){#detail-dialog{width:calc(100vw - 18px);height:calc(100dvh - 28px);max-height:calc(100dvh - 28px)}#detail-dialog[open]{display:block}#detail-dialog .detail-peek{display:none}.detail-card{border-radius:18px}#detail-dialog .detail-header{gap:4px 6px;flex-wrap:wrap;padding:10px 14px}#detail-dialog .detail-heading{flex:1 1 calc(100% - 42px)}#detail-dialog .detail-header h2{font-size:23px}#detail-dialog .detail-summary{font-size:11px}.detail-navigation{gap:42px;bottom:max(10px,env(safe-area-inset-bottom));pointer-events:auto;touch-action:pan-y pinch-zoom}.detail-nav-arrow{pointer-events:none}.detail-nav-arrow:hover{background:transparent;color:var(--brand-gold)}.detail-nav-arrow:focus-visible{outline-offset:-4px}#detail-previous{--detail-hint-direction: -1}#detail-next{--detail-hint-direction: 1}.detail-nav-hint .detail-nav-arrow svg{animation:detail-nav-nudge .65s ease-out .85s}#detail-dialog .popup-close{width:36px;min-width:36px}}@keyframes detail-nav-nudge{0%,42%,to{transform:translate(0)}22%{transform:translate(calc(var(--detail-hint-direction) * 5px))}65%{transform:translate(calc(var(--detail-hint-direction) * 3px))}}@media(prefers-reduced-motion:reduce){.detail-nav-hint .detail-nav-arrow svg{animation:none}.detail-card-returning{transition:none}.detail-card-dragging{transform:none}}@media(forced-colors:active){.detail-card,.detail-peek{border:1px solid CanvasText}.detail-nav-arrow{color:ButtonText}}.detail-page-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 26px;border-bottom:1px solid var(--border-disclosure);color:#c7c5c3}.detail-page-notice p{margin:0;font-size:12px;line-height:1.5}.detail-page-notice .text-button{flex:0 0 auto;min-height:36px}@media(max-width:600px){.detail-page-notice{padding:8px 17px}}
