/* Case categories: homepage-inspired desktop pill and compact mobile dock. */
.case-category-nav{position:fixed;z-index:990;left:50%;bottom:calc(40px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:3px;width:max-content;max-width:calc(100% - 32px);padding:5px;border:1px solid #ffffffa8;border-radius:60px;background:#ffffff80;box-shadow:0 14px 40px #18120d1f,inset 0 1px 0 #ffffffb8;backdrop-filter:blur(28px) saturate(1.3);-webkit-backdrop-filter:blur(28px) saturate(1.3);}
.case-category-nav a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:11px 22px;border-radius:60px;color:#33291f;text-decoration:none;font:400 13px/1.4 'DM Sans','Noto Sans TC',sans-serif;letter-spacing:.06em;white-space:nowrap;transition:background .2s,color .2s;}
.case-category-nav a:hover{background:#ffffff70;color:#17120e;}
.case-category-nav a[aria-current="page"]{color:#fff8ee;background:linear-gradient(120deg,#a88160,#76543b);box-shadow:0 7px 18px #442c1b33;}
.case-category-nav a:focus-visible{outline:2px solid #76543b;outline-offset:3px;}
.case-category-nav svg{display:none;width:20px;height:20px;flex:none;}
body:has(.case-category-nav){padding-bottom:110px;}
.case-index.detail-mode .filterbar{display:none!important;}
@media(min-width:1025px){.case-index.detail-mode .work-band{top:50%;}}
@media(max-width:1024px){.case-index.detail-mode #app{padding-top:var(--case-nav-height);}}
@media(max-width:760px){
 .case-category-nav{bottom:calc(12px + env(safe-area-inset-bottom,0px));width:calc(100% - 24px);max-width:430px;gap:2px;padding:5px;border-color:#ffffff35;border-radius:26px;background:#211f1ce8;box-shadow:0 8px 28px #0003,inset 0 1px 0 #ffffff17;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
 .case-category-nav a{flex:1;min-width:0;min-height:58px;flex-direction:column;gap:5px;padding:7px 2px;border-radius:21px;font-size:11px;letter-spacing:.02em;color:#d5d0c6;}
 .case-category-nav svg{display:block;}
 .case-category-nav a:hover{background:#ffffff10;color:#fff;}
 .case-category-nav a[aria-current="page"]{color:#fff8ee;background:linear-gradient(120deg,#a88160,#76543b);box-shadow:none;}
 .case-category-nav a:focus-visible{outline-color:#e5c4a3;outline-offset:0;}
 body:has(.case-category-nav){padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));}
}
@media(prefers-reduced-motion:reduce){.case-category-nav a{transition:none;}}
@media print{.case-category-nav{display:none!important;}}

/* Match the homepage mobile glass dock; labels identify the four case categories. */
@media(max-width:760px){
 .case-category-nav{box-sizing:border-box;bottom:calc(46px + env(safe-area-inset-bottom,0px));width:min(320px,calc(100% - 32px));max-width:none;gap:0;padding:6px 8px;border:1px solid #ffffff26;border-radius:999px;background:linear-gradient(135deg,#ffffff0a,#ffffff02);box-shadow:inset 0 1px 0 #ffffff1a,0 4px 18px #10131812;backdrop-filter:blur(6px) saturate(110%);-webkit-backdrop-filter:blur(6px) saturate(110%);}
 .case-category-nav a{box-sizing:border-box;height:48px;min-height:48px;gap:3px;padding:4px 2px;border-radius:16px;background:transparent;color:#756857;text-shadow:0 1px 2px #ffffff38;font-size:10px;line-height:1.2;}
 .case-category-nav svg{width:18px;height:18px;}
 .case-category-nav a:hover{background:#ffffff0d;color:#756857;}
 .case-category-nav a[aria-current="page"]{background:#ffffff14;color:#756857;box-shadow:inset 0 0 0 1px #ffffff18;}
 .case-category-nav a.on-dark,.case-category-nav a.on-dark:hover,.case-category-nav a.on-dark[aria-current="page"]{color:#fff;text-shadow:0 1px 3px #0005;}
 body:has(.case-category-nav){padding-bottom:calc(130px + env(safe-area-inset-bottom,0px));}
}

/* Concentric capsule shapes for the mobile glass navigation. */
@media(max-width:760px){
 .case-category-nav{padding:6px;}
 .case-category-nav a,.case-category-nav a:hover,.case-category-nav a[aria-current="page"]{border-radius:999px;}
}
/* Portfolio footers use a black surface, including the space reserved for the dock. */
body:has(.case-category-nav){padding-bottom:0;}
body:has(.case-category-nav) footer.vsl-footer{background:#0b0a09;color:#c8c1b6;border-top-color:#ffffff24;padding-bottom:calc(130px + env(safe-area-inset-bottom,0px));}
body:has(.case-category-nav) .vsl-footer a,body:has(.case-category-nav) .vsl-footer .vsl-footer-tag,body:has(.case-category-nav) .vsl-footer .vsl-footer-legal{color:#c8c1b6;}
body:has(.case-category-nav) .vsl-footer a:hover{color:#fff;}
body:has(.case-category-nav) .vsl-footer .vsl-footer-logo img{filter:none;}
body:has(.case-category-nav) .vsl-footer .vsl-footer-social a,body:has(.case-category-nav) .vsl-footer .vsl-footer-legal{border-color:#ffffff24;}
body:has(.case-category-nav) .vsl-footer a:focus-visible,body:has(.case-category-nav) .vsl-footer button:focus-visible{outline-color:#e0b994;}