#detail{width:350px;border-radius:18px;background:var(--panel);scrollbar-width:thin;scroll-padding-top:42px}.detail-body{padding:24px}.detail-body h2{font-size:25px;letter-spacing:-.4px;line-height:1.2;margin:0 32px 7px 0}.detail-body .object-category{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}.object-actions{display:flex;gap:8px;margin:18px 0}.detail-body .object-actions>a,.detail-body .object-actions>button{display:flex;flex:1;min-width:0;flex-direction:column;gap:7px;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);padding:10px 4px;min-height:66px;margin:0;font-size:11px;color:var(--text);text-decoration:none}.object-actions svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.detail-body .object-actions .call-action{color:#18282e;background:#ff922e;border-color:#ff922e}.object-actions [aria-pressed=true]{color:var(--accent)!important}.detail-body .detail-img{display:block;aspect-ratio:1.8;width:100%;height:auto;max-height:210px;object-fit:cover;border-radius:12px;margin:0 0 18px}.object-info{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}.info-icon{font-size:23px;color:var(--muted);width:24px;flex-shrink:0}.object-info small{font-size:11px;color:var(--muted)}.object-info p{font-size:14px;line-height:1.5;margin:4px 0 0;color:var(--text)}.detail-body .object-profile{display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;font-size:13px;padding:14px 0;margin:4px 0;border-radius:0;border-bottom:1px solid var(--line);color:var(--text)}.object-profile span:last-child{color:var(--accent);font-size:20px}.object-extra{margin-top:18px;color:var(--muted);font-size:12px}.object-extra summary{cursor:pointer;min-height:36px;line-height:1.5}.object-extra p{font-size:12px}#close-detail{z-index:4;background:var(--panel);border:1px solid var(--line);border-radius:10px}
@media(max-width:760px){body.has-detail #detail{width:auto;max-height:calc(100% - 215px);left:0;right:0;bottom:calc(124px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;box-shadow:0 -8px 35px #0002}.detail-body{padding:10px 18px 18px}.detail-body h2{font-size:22px;margin-right:25px}.detail-body .object-category{font-size:12px}#fold-detail{height:30px;touch-action:none}#close-detail{position:sticky;top:4px;margin-top:-30px;right:8px;float:right;width:36px;height:36px}.object-actions{margin:14px 0}.detail-body .object-actions>a,.detail-body .object-actions>button{min-height:64px;font-size:11px}.detail-body .detail-img{max-height:170px}body.detail-folded #detail{max-height:116px;overflow:hidden}body.detail-folded .detail-body{padding-top:5px;padding-bottom:12px}body.detail-folded .detail-body h2{margin-bottom:5px}body.detail-folded .detail-body .object-category{margin-bottom:0}body.detail-folded .detail-body>:not(h2):not(.object-category){display:none}}

/* Desktop: keep the directory and selected object adjacent. */
@media(min-width:761px){#explorer{width:clamp(240px,24vw,330px)}body #detail{left:calc(22px + clamp(240px,24vw,330px) + 8px);right:auto;top:22px;bottom:85px;width:clamp(260px,25vw,350px);max-height:none;border-radius:18px}#detail .detail-body{padding:20px}}

@media(min-width:761px){body #detail{overflow:hidden;padding:6px}#detail>.detail-body{height:100%;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a8b0b5 transparent;scrollbar-gutter:stable;padding:14px}#detail>.detail-body::-webkit-scrollbar{width:6px}#detail>.detail-body::-webkit-scrollbar-track{background:transparent}#detail>.detail-body::-webkit-scrollbar-thumb{background:#a8b0b5;border-radius:8px}}

@media(min-width:761px){body #explorer{left:0;top:0;bottom:0;max-height:none;border-radius:0;overflow:hidden}body #detail{left:calc(clamp(240px,24vw,330px) + 8px);top:0;bottom:0;max-height:none;border-radius:0}#explorer #list{overscroll-behavior:contain;scrollbar-gutter:stable}}
