/* hub.html only */
/* ---------- QA polish: comfortable touch targets, tidy footer and nav at mid widths ---------- */
@media (pointer:coarse){
  .logo{padding-block:10px;margin-block:-10px}
  .ulink{padding-block:10px;margin-block:-10px}
  .crumb a{display:inline-block;padding-block:12px;margin-block:-12px}
  .seg button{height:36px}
  .email a{padding-block:6px;margin-block:-6px}
}
@media (max-width:900px){.nav-right .status{display:none}}
@media (max-width:760px){.foot{flex-direction:column;align-items:flex-start;gap:12px}}
/* ---------- theme transition: the new mode spreads from the toggle like ink in water ---------- */
@property --vr{syntax:'<length>';inherits:true;initial-value:0px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.vt-ink::view-transition-new(root){
  -webkit-mask-image:
    radial-gradient(circle at var(--vx) var(--vy),#000 var(--vr),transparent calc(var(--vr) + 160px)),
    radial-gradient(circle at calc(var(--vx) - var(--vr) * .2) calc(var(--vy) + var(--vr) * .14),#000 calc(var(--vr) * .86),transparent calc(var(--vr) * .86 + 140px)),
    radial-gradient(circle at calc(var(--vx) + var(--vr) * .06) calc(var(--vy) + var(--vr) * .3),#000 calc(var(--vr) * .74),transparent calc(var(--vr) * .74 + 120px));
  mask-image:
    radial-gradient(circle at var(--vx) var(--vy),#000 var(--vr),transparent calc(var(--vr) + 160px)),
    radial-gradient(circle at calc(var(--vx) - var(--vr) * .2) calc(var(--vy) + var(--vr) * .14),#000 calc(var(--vr) * .86),transparent calc(var(--vr) * .86 + 140px)),
    radial-gradient(circle at calc(var(--vx) + var(--vr) * .06) calc(var(--vy) + var(--vr) * .3),#000 calc(var(--vr) * .74),transparent calc(var(--vr) * .74 + 120px));
  animation:vt-ink 1100ms cubic-bezier(.4,.15,.2,1) both;
}
@keyframes vt-ink{from{--vr:0px}to{--vr:var(--vR)}}